Electron: jQuery tidak disetel secara global karena "modul" didefinisikan

Ini sebenarnya bukan bug untuk kedua sistem, Anda memiliki masalah yang sama saat menggunakan browserify. jQuery melihat bahwa ini berjalan di lingkungan CommonJS dan berharap untuk digunakan seperti itu.

Solusinya relatif sederhana, namun. Alih-alih memuat jQuery sebagai tag skrip, muat melalui require:

window.$ = window.jQuery = require('/path/to/jquery');

Saya setuju dengan @ChiperSoft , ini adalah perilaku yang diharapkan di lingkungan CommonJS, jadi saya menandai ini sebagai wontfix . Dan terima kasih telah berbagi temuan Anda.

@ChiperSoft , Di mana saya harus meletakkan file jquery.js agar require('jquery') berfungsi? Saya sudah mencoba menempatkannya pada level yang sama dengan package.js dan main.js tetapi runtime sepertinya tidak mengambilnya.

Anda dapat menggunakan require('jquery.js') perhatikan .js di bagian akhir, untuk memuat jquery relatif terhadap file HTML Anda.

Maaf, saya menggunakan window.$ = window.jQuery = require('/path/to/jquery'); seperti yang disebutkan tetapi tidak berhasil,
Uncaught Error: Cannot find module 'scripts/jquery-1.10.2.min.js' module.js:339

Saya menggunakannya sepanjang waktu dan itu bekerja dengan baik! Inilah yang saya gunakan, berhati-hatilah dengan jalannya:

window.$ = window.jQuery = require('./scripts/jquery-2.1.1.min.js');

@frankhale oh, ini berhasil dengan ./ , terima kasih!

Luar biasa! Hal jalan tersandung saya juga.

Jika aplikasi Anda tidak memerlukan integrasi simpul, tambahkan "node-integration": false ke opsi BrowserWindow Anda. Dalam hal ini module.exports tidak tersedia, jQuery berfungsi seperti yang diharapkan.

@kabalage bekerja dengan sangat baik, terima kasih!

:+1:

Berjalan ke masalah yang sama. Instal jQuery melalui NPM kemudian diperlukan dan berhasil.

bagaimana jika integerasi simpul dan jquery tanpa persyaratan diperlukan ...

Saya mencoba memahami ini karena tampaknya ini adalah sesuatu yang bisa saya gunakan. Namun saya ingin tahu kapan Anda bisa yakin dapat menggunakan $. Mencatat $ tepat setelah baris ini akan menghasilkan require dan bukan jquery karena require adalah asinkron?

window.$ = window.jQuery = require('/path/to/jquery');
console.log($) // log 'memerlukan' bukan 'jQuery'

@dieroux coba instal melalui npm:

npm install jquery

Ini bekerja untuk saya ketika mencoba hal yang sama. Maka Anda tidak perlu memberikan jalan, Anda cukup mengatakan:

window.$ = window.jQuery = require('jquery');
console.log( [$, jQuery ]);

Bagaimana jika kita membutuhkan integrasi simpul, dan kita tidak dapat menggunakan require('something') ?
Saat ini berfungsi dengan melakukan "hapus modul;" sebelum memuat hal-hal yang bermasalah.
Apa dampak dari melakukan ini?

Saya mengalami masalah serupa di mana jquery dapat dimuat dengan benar saat pertama kali saya membutuhkannya dalam skrip pramuat pada tampilan web. Namun kedua kalinya jquery dirujuk dari halaman eksternal, baris untuk menetapkannya melalui:

  try {
        module.exports = null;
        if (typeof require === 'function') {
          alert('window: ' + window);
          alert('jquery: ' + window.jQuery);
          alert('export: ' + module.exports);
          if ( !window.jQuery ) {
            alert('before load');
            window.jQuery = require('./node_modules/jquery/dist/jquery.js');
            alert('after load');
            window.$ = window.jQuery;
            alert('after assignment');
         }
          alert('jquery: ' + window.jQuery);
        }
    } catch(e) {
        alert('failed load.');
        console.log(e);
    }

melempar properti Cannot read createElement of undefined di konsol saat penugasan ke window.jQuery dari require, mengakibatkan jQuery tidak dimuat.

Pesan kesalahan pada konsol adalah:
Halaman tamu mencatat pesan: TypeError: Tidak dapat membaca properti 'createElement' dari baris yang tidak ditentukan: 40

Adakah pemikiran tambahan tentang cara memuat jquery dengan sukses di halaman berikutnya?

Terima kasih.

Ini adalah hal pertama yang saya tersandung ketika menjalankan quickstart elektron dan mencoba membungkus aplikasi lokal - sesuatu yang berfungsi di chrome tiba-tiba tidak berfungsi dalam pemilihan. Memiliki kesalahan yang terkubur dalam pemuatan modul sudut yang gagal tentu saja tidak membantu, jadi saya berasumsi ada masalah dengan urutan pemuatan skrip, begitulah cara saya menemukan utas ini. Mungkin kata kunci akan membantu orang lain.

Solusi @kabalage di atas bekerja dengan sempurna.

Halo semua, saya hanya ingin menambahkan beberapa info dengan masalah ini, Jika saya menempelkan kode perpustakaan jquery di konsol elektron $ dan jQuery ditambahkan sebagai fungsi di objek jendela. saya bisa menjalankan jquery.

Referensi jQuery dengan tag skrip, kesalahan yang sama. Harus "integrasi simpul": false di BrowserWindow()

Hi guys... Saya tidak yakin mengapa masalah ini ditutup, pasti masih ada masalah di sini, izinkan saya menjelaskan. Jika saya menginstal jQuery secara lokal melalui NPM dan memuat file html lokal kemudian menggunakan:

mainWindow.$ = membutuhkan('jQuery');
mainWindow.jQuery = membutuhkan('jQuery');

maka itu berfungsi seperti yang diharapkan. Namun, jika saya melakukan mainWindow.loadUrl('http://external.site.com");

Saya mendapatkan kesalahan yang disebutkan di mana $ dan jQuery tidak ditentukan. Menonaktifkan integrasi simpul benar-benar bukan jawaban yang dapat diterima; itulah alasan saya menggunakan Electron sejak awal, saya membutuhkannya.

Saya ingin sekali masuk ke sumbernya dan memecahkan masalah ini sendiri, tetapi saya pikir saya akan melihat apakah ada yang punya informasi tambahan tentang ini untuk mengarahkan saya ke arah yang benar sebelum saya pergi ke sana. Adakah yang bisa membuatnya berfungsi _dengan_ integrasi simpul, terhadap situs eksternal?

Terima kasih ... dan kerja bagus BTW. Segala sesuatu yang baru dan indah, seperti ini, akan dimulai dengan beberapa kerutan.

Salam Hormat

/W

Saya membuatnya bekerja dengan integrasi simpul.

1. Instal dengan npm, jadi itu didefinisikan dalam package.json
2. Gunakan require dengan nama modul <script>window.$ = window.jQuery = require('jquery');</script>
3. Jangan gunakan jalur dalam parameter yang diperlukan.
4. Jangan menginstal melalui bower, itu akan membuat Anda menggunakan jalur dalam parameter yang diperlukan.
5. Jika Anda menggunakan bootstrap, Anda harus memuat jQuery terlebih dahulu.

Semua di atas hanya didukung oleh pengalaman saya.

Akan bekerja

    <script>window.$ = window.jQuery = require('jquery');</script>
    <script src="path_to/bootstrap.js"></script>

Tidak akan

    <script>window.$ = window.jQuery = require('./path/to/jquery.js');</script>
    // or
    <script src="path_to/jquery.js"></script>
    <script src="path_to/bootstrap.js"></script>

Hi dilmdeep, terima kasih atas respon cepatnya. Apakah solusi Anda bergantung pada kontrol atas situs eksternal? Saya mencoba memuat situs yang akses sumbernya tidak saya miliki. Apa yang Anda katakan tentang package.json menarik. Saya memang menginstal jQuery melalui npm (dan menggunakan pembangunan kembali yang didokumentasikan untuk elektron) dan, seperti yang saya katakan, saya dapat menggunakan jQuery dengan file HTML lokal, tetapi jQuery tidak didefinisikan dalam package.json saya ..... Oh dan saya menguji dengan menonaktifkan integrasi simpul dan sementara itu berhasil, itu bukan yang saya butuhkan. Terima kasih.

Saya hanya ingin memperbarui ini jika ada orang lain yang mengalami masalah yang sama. Cara saya mengatasi ini (setelah mengunduh 10GB sumber Electron) sebenarnya ada di dokumentasi untuk memulai. Alih-alih memanggil url situs eksternal, saya memuat file HTML lokal dan menggunakan tampilan web dari file html itu untuk memuat situs eksternal. Ini memuat dengan sempurna dengan integrasi simpul diaktifkan. Lihat saja di dokumen untuk tampilan web, cukup mudah. Juga terima kasih saya kepada Paul di ruang obrolan karena telah membantu saya memulai dengan sumbernya. Jika ada yang bertanya-tanya mereka menggunakan Atom (tentu saja) untuk mengkode Electron, WinDbg di windows untuk debug dan Ninja untuk dikompilasi. FYI kompilasi sumbernya sangat mudah dan sangat cepat, itu dikompilasi pertama kali menggunakan skrip mereka dan dokumentasi yang disediakan. Sekali lagi, kerja bagus teman-teman!

@WolfieWerewolf Bravo! harus mengatakan contoh agak menyesatkan jika keamanan dipertimbangkan.

@Shufeng01 Cheers mate, saya datang di cuaca dingin ini dari .Net land jadi merasa seperti n00b lengkap. Anda benar bahwa keamanan adalah masalah, namun menggunakan flag disablewebsecurity pada tampilan web itu sendiri menyelesaikan sebagian besar. Saya pikir keamanan, secara umum, adalah tantangan terbesar untuk membawa web ke desktop... tapi sepadan dengan usaha. Batuan elektron.

@diimdeep terima kasih, solusi Anda bekerja untuk saya (bukan yang diinginkan @WolfieWerewolf !)

Ini sedikit masalah bagi kami. Kami menggabungkan jquery dengan js aplikasi kami, dan JS yang digabungkan ini kemudian digunakan dalam pembuatan untuk versi web dan desktop (kami telah menggunakan NWJS). Pemasangan NPM mungkin merupakan opsi bagi kami, tetapi tidak ideal dalam situasi kami karena beberapa alasan.

Apakah tidak ada cara teoretis untuk membuatnya berfungsi menggunakan tag skrip?

@bgSosh , mengapa tidak menonaktifkan integrasi simpul (baca tentang kunci node-integration sini )? Jika Anda melakukannya, tag skrip akan berfungsi dengan benar. Jika Anda memerlukan beberapa hal terkait simpul, Anda dapat melakukannya dalam skrip preload (mereka selalu memiliki integrasi simpul).

@etiktin bisa tolong jelaskan bagaimana melakukan ini di preload ? saya baru mengenal elektron dan belum berhasil mendapatkan skrip pramuat untuk dieksekusi (setidaknya tampaknya tidak dijalankan, console.log tidak berfungsi, mengubah window.myExposedIPC = require('ipc') misalnya tidak tersedia nanti, dll.

saya sudah membuatnya berfungsi jika ada yang memiliki masalah yang sama: https://github.com/atom/electron/issues/1753#issuecomment -157409572

@matthiasg senang Anda berhasil. Saya menambahkan beberapa komentar ke contoh Anda.

Ketika integrasi simpul dinonaktifkan dan Anda ingin melakukan beberapa hal simpul dalam skrip pramuat Anda, penting untuk memiliki referensi ke simpul global apa pun yang Anda butuhkan. Anda perlu melakukan ini, karena pada centang berikutnya referensi global dihapus (ini adalah bagaimana menonaktifkan integrasi simpul diterapkan), jadi jika Anda tidak memegang referensi dan Anda kemudian mencoba meminta sesuatu pada panggilan fungsi atau penghitung waktu , itu akan gagal.

@etiktin terima kasih. Tentu saja itu adalah bagian darinya, tetapi yang saya lewatkan adalah dokumentasi untuk process.once('loaded', ... ) setelah itu ada, saya benar-benar dapat mengekspos apis yang saya inginkan.

Hai kawan,

Karena tidak ada di atas yang bekerja untuk saya (menggunakan w2ui dan JQuery baik dengan elektron dan halaman HTML independen, biarkan juga w2ui menggunakan jQuery), saya merasa perlu untuk memposting solusi kerja saya di sini:

<html>
<head>
    <title>MyApp</title>
    <link rel="stylesheet" type="text/css" href="./lib/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./lib/require.js"></script>
    <script type="text/javascript" src="./lib/jquery-2.1.4.js" onload="$ = jQuery = module.exports;"></script>
    <script type="text/javascript" src="./lib/w2ui-1.4.3.js"></script>
</head>
<body>
<script type="text/javascript">
    // use global $ and w2ui here... 
    ...

Saya seorang pemula di JS dan melakukan studi teknologi dan sekarang sedikit khawatir tentang pemuatan modul yang tidak jelas ini. Ini mungkin pertanyaan konyol tetapi mengapa elektron memuat modul JS sangat berbeda dari browser biasa saat memuat halaman HTML?

@forman apakah Anda menonaktifkan integrasi simpul dan menggunakan skrip pramuat untuk interaksi simpul? Lihat komentar di atas oleh saya dan @matthiasg. Jika Anda melakukannya, jquery dan yang lainnya akan bekerja persis seperti yang mereka lakukan di browser.

Akan bekerja

requirejs(['require', '../require.config'], function (requirejs, config) {
        //fixed jQuery isn't set globally
        requirejs(['jquery'],function(jquery){
            window.$ = window.jQuery =jquery;
        });
        // update global require config
        window.requirejs.config(config);
        // load app
        requirejs(['main'],function(main){
        });
    });

@forman Terima kasih!! Tidak satu pun di atas yang berfungsi kecuali solusi Anda. (menggunakan 0,35.5 yang dibangun sebelumnya dengan elektron)
@etiktin Ini bekerja untuk saya tanpa harus mengubah apa pun di sisi Proses utama

Saya pikir saya harus menambahkan masalah dan solusi kami ke utas ini untuk referensi di masa mendatang.

Kami sedang memuat url eksternal dalam tampilan web dan perlu menjalankan Javascript kami sendiri yang dapat menggunakan electron/Node.js. Mengaktifkan integrasi simpul pada tampilan web bukanlah pilihan karena ini akan merusak jQuery yang digunakan oleh url eksternal.

Apa yang akhirnya kami lakukan adalah menambahkan skrip pramuat ke tampilan web tempat kami meletakkan modul yang kami butuhkan dalam lingkup global. Ini membuat mereka dapat diakses nanti ketika kami menjalankan Javascript kami.

pramuat.js:

global.ipcRenderer = require('electron').ipcRenderer;

Dan kemudian kita dapat mengakses ipcRenderer seperti:

webview.executeJavaScript("ipcRenderer.sendToHost('hello');");

Uncaught Error: Cannot find module 'jquery' dan tidak ada yang membantu dari utas ini =/

Hapus saja module .

Saya ingin halaman web saya berfungsi baik di browser maupun di elektron.
Seperti yang dijelaskan di utas ini, elektron mengekspos module global ketika nodeIntegration: true , yang kemudian dilihat dan bereaksi oleh jQuery:

if ( typeof module === "object" && typeof module.exports === "object" ) {
    // bind to module
} else {
    // bind to window
}

Saya bisa mendapatkan jQuery untuk mengikat ke objek window dan menggunakan nodeIntegration: true dengan melakukan hal berikut di file html saya:

<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script>if (window.module) module = window.module;</script>

Semoga ini bisa membantu seseorang.

@tomkel di sini adalah solusi lain:

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>window.jQuery = window.$ = module.exports;</script>

Dalam kasus saya, saya harus dapat meluncurkan aplikasi saya sebagai situs web dan aplikasi Electron. Inilah solusi saya:

<!-- Launched with Electron -->
<script>
    if ('require' in window) {
        window.$ = window.jQuery = require('jquery');
    }
</script>

<!-- From CDN, Bower, etc... -->
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>

<!-- Others libraries depending on jQuery -->
<script src="..."></script>

@dkfiresky Ya, sepertinya itu juga berhasil. Namun saya menggunakan Highcharts dalam hubungannya dengan jQuery. Highcharts melakukan hal serupa, menempatkan dirinya di module jika ada. Untuk alasan apa pun saya tidak bisa mendapatkan

<script>window.Highcharts = module.exports;</script>

bekerja. Saya telah memperbarui komentar saya sebelumnya untuk mencerminkan hal itu.

@tomkel solusi Anda dengan penyembunyian sementara module bekerja sangat baik untuk saya. Masalah saya adalah selama migrasi dari nw.js dengan ngDialog dengan asumsi bahwa itu ada di lingkungan CommonJS yang gagal require('angular') dan mendaftarkan dirinya sebagai modul sudut.

Di Electron 0.36.7 saya menemukan bahwa saya tidak dapat melakukan window.$ = require('jquery'); karena gagal menemukan modul. Penyaji tampaknya tidak memiliki jalur resolusi modul yang sama dengan proses utama

Sebenarnya itu tidak berhasil karena jQuery akan berjalan di proses utama yang tidak memiliki document . Dan require('jquery') tidak bekerja untuk saya karena saya menyajikan halaman melalui HTTP seperti #4243. Untuk memperbaikinya, saya sudah mencoba menambahkan jalur modul dari proses utama ke proses penyaji dengan:

require('electron').remote.process.mainModule.paths.forEach(function(path) {
    require('module').globalPaths.push(path);
});

Setelah itu saya bisa melakukan require('jquery') tanpa masalah. Tidak yakin apa dampak lain yang mungkin terjadi

Dan require('jquery') tidak berfungsi untuk saya karena saya menyajikan halaman melalui HTTP seperti #4243.

Jika Anda mengizinkan konten jarak jauh mengakses node.js, aplikasi Anda sangat tidak aman, Anda perlu menonaktifkan integrasi simpul saat menjalankan konten jarak jauh dan menggunakan skrip pramuat

Meskipun "konten jarak jauh" adalah localhost? Saya menggunakan node untuk membuat dan menyajikan halaman kepada saya alih-alih membaca dari file lokal, itu saja

Memperluas di @dkfiresky , Anda mungkin mendapatkan Uncaught ReferenceError: module is not defined dalam versi browser.

Jika demikian, coba ini:

<script src="./bower_components/jquery/dist/jquery.min.js"></script>
<script>window.jQuery = window.$ = typeof module === 'object' ? module.exports : jQuery</script> 

@dspint module tidak akan ditentukan hanya jika integrasi simpul dinonaktifkan, jadi Anda mungkin harus menggunakan contoh saya hanya dengan integrasi simpul diaktifkan.

Jika Anda menggunakan window.open , Anda dapat meneruskan nodeIntegration=0 dengan opsi jendela Anda.

window.open('https://your.cool/url', 'title', 'nodeIntegration=0');

Aku melakukan:

<script>
  var saveModule = module;
  delete module;
</script>
  <script src="jquery.js"></script>
  <script src="jquery-ui.js"></script>
<script>
  module = saveModule;
</script>

Saya memiliki masalah yang sama dengan @gnail. Saya memiliki server simpul yang menjalankan proyek sudut. Kodenya memperbaikinya untuk saya.

require('electron').remote.process.mainModule.paths.forEach(function(path) {
  require('module').globalPaths.push(path);
});

Ini bekerja untuk saya

<script>
    window['old_module'] = window['module'];
    delete window.module;
</script>

<script src="any_lib_like_jquery.js" />

<script>
    window['module'] = window['old_module'];
    delete window.old_module;
</script>

Saya mengalami masalah ini, saya sudah mencoba semua utas ini. tapi tidak ada yang berhasil, saya terjebak di awal
dari semua.
saya menggunakan perwakilan starter elektron

@PauloGaldo pada dasarnya solusi apa pun di utas ini harus berfungsi. Silakan posting kutipan kode Anda yang relevan dan semua pesan kesalahan yang Anda temui.

@ChiperSoft Bisakah Anda memberi tahu saya di mana saya harus menggunakan kode Anda?

@tomkel Sangat bagus!
Saya akhirnya membuat Masonry bekerja di dalam Electron!

Untuk beberapa alasan saya masih tidak dapat membuat jQuery berfungsi baik di browser maupun di aplikasi Electron.
Aplikasi web saya berfungsi dengan baik di browser sedangkan ketika saya mencoba memuat url yang sama melalui aplikasi elektron itu terlempar -

Aplikasi web - https://github.com/zulip/zulip
Aplikasi elektron - https://github.com/zulip/zulip-electron

Aplikasi web menggunakan versi jquery 1.12.1 melalui npm.
Saya tidak dapat menggunakan nodeintegration karena saya membutuhkannya dalam proses penyaji saya.
Saya kesulitan memecahkan ini. Adakah yang tahu cara membuatnya bekerja?
cc @aaaaahaaaaa @maykefreitas @paulcbetts @tomkel @dkfiresky

@englishextra tidak beruntung. Saya mencoba memasukkan kode Anda ke preload.js aplikasi saya tetapi mendapatkan kesalahan yang sama.

@englishextra Tidak, saya tidak perlu jquery di aplikasi saya. Lihat kode pembaruan di sini . Saya tidak dapat memasukkan kode Anda ke dalam logika aplikasi saya karena saya menggunakannya hanya untuk memuat url yang ditentukan, lihat this .

bagi mereka yang menggunakan kerangka kerja Aurelia:
https://github.com/aurelia/skeleton-navigation/pull/675/commits/6292e698dcb8f383afc748aa7c8a50e540dfbe2e

Saya menyelesaikan masalah ini dengan ini

<script type="text/javascript" src="js/jquery.min.js" onload="window.$ = window.jQuery;"></script>

dan atur

webPreferences: {
            nodeIntegration: false, 
        }

jika Anda dengan nodeIntegration: true, imorot jQuery seperti ini

<script type="text/javascript" src="js/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>

mengacu kepada
https://github.com/electron/electron/issues/345

Maksud saya, sepertinya itu masalah yang buruk, jadi mengapa tidak memasukkannya ke dalam Electron yang sebenarnya? Mungkin mengintegrasikan perpustakaan JavaScript utama ke Electron?

Kemungkinannya adalah, jika Anda menggunakan jQuery di Aplikasi Elektron, Anda melakukan sesuatu yang sangat salah atau setidaknya tidak efisien.

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>

@drowlands Termasuk
@amhoho Itu karena Anda perlu require jQuery, atau memodifikasi kode initnya di fungsi teratas - hanya menyisakan factory( global );

Di Sini:

( function( global, factory ) {

    "use strict";

    if ( typeof module === "object" && typeof module.exports === "object" ) {

        // For CommonJS and CommonJS-like environments where a proper `window`
        // is present, execute the factory and get jQuery.
        // For environments that do not have a `window` with a `document`
        // (such as Node.js), expose a factory as module.exports.
        // This accentuates the need for the creation of a real `window`.
        // e.g. var jQuery = require("jquery")(window);
        // See ticket #14549 for more info.
        module.exports = global.document ?
            factory( global, true ) :
            function( w ) {
                if ( !w.document ) {
                    throw new Error( "jQuery requires a window with a document" );
                }
                return factory( w );
            };
    } else {
        factory( global );
    }

Dalam kasus saya, saya memuat lib melalui fetch/Promise atau xhr, jadi saya memiliki rutinitas ini untuk menghapus pemeriksaan modul di lib vendor.
@RRorg aneh apa yang kamu katakan

tanda

@kabalage Saya pikir konfigurasi di posting Anda di atas sudah ketinggalan zaman. Sepertinya seharusnya seperti ini sekarang:

const window = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false, 
  },
});

Pada dokumen resmi:
https://electronjs.org/docs/faq#i -can-not-use-jqueryrequirejsmeteorangularjs-in-electron
```