Elektron: jQuery tidak didefinisikan

315

Masalah: saat mengembangkan menggunakan Electron, ketika Anda mencoba menggunakan plugin JS apa pun yang membutuhkan jQuery, plugin tidak menemukan jQuery, bahkan jika Anda memuat di jalur yang benar menggunakan tag skrip.

Sebagai contoh,

<body>
<p id="click-me">Click me!</p>
...
<script src="node_modules/jquery/dist/jquery.min.js"></script> //jQuery should be loaded now
<script>$("#click-me").click(() => {alert("Clicked")});</script>
</body>

Menjalankan kode di atas tidak akan berfungsi. Bahkan, buka DevTools, buka tampilan Konsol, dan klik pada <p>elemen. Anda harus melihat itu function $ is not definedatau sesuatu dengan efek itu.

jquery electron Bruno Vaz
sumber
Mengapa tidak menggunakan requirefungsi Elektron saja ?

Jawaban:

762

Solusi IMO yang lebih baik dan lebih umum: 

<!-- Insert this line above script imports  -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

<!-- normal script imports etc  -->
<script src="scripts/jquery.min.js"></script>    
<script src="scripts/vendor.js"></script>    

<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>

Manfaat

  • Bekerja untuk peramban dan elektron dengan kode yang sama
  • Memperbaiki masalah untuk SEMUA perpustakaan pihak ketiga (bukan hanya jQuery) tanpa harus menentukan masing-masing
  • Script Build / Pack Friendly (yaitu Grunt / Gulp semua skrip ke vendor.js)
  • TIDAK perlu node-integrationpalsu

sumber di sini

Dale Harders
sumber
1
@fareednamrouti Ya, tetapi inti dari solusi ini adalah Anda tidak perlu mendaftar pustaka pihak ke-3 (hanya berfungsi!). Berguna ketika Anda mengimpor banyak perpustakaan (atau skrip bundel sendiri)
Dale Harders
2
Terima kasih! dalam kasus saya, solusi ini juga berfungsi untuk versi yang lebih lama dari d3 seperti d3 v3 atau lebih rendah
headwinds
2
@DaleHarders Ternyata window.moduledimulai dengan nilai yang sama dengan module, jadi kode Anda tidak berfungsi seperti yang diharapkan. Cara yang tepat untuk melakukannya adalah dengan menyimpan moduleke beberapa properti jendela (yang tidak digunakan) lainnya, seperti window.tempModule. Untuk mengkonfirmasi apa yang saya katakan, coba console.log(module)setelah pernyataan terakhir Anda untuk memverifikasi itu sekarang module === undefined.
Lucio Paiva
1
@Lucio Nggak. Kita perlu menyimpan ke window.module karena ini adalah tempat perpustakaan pihak ke-3 mengharapkannya (lingkungan browser). Saya pikir Anda membingungkan Node.js dan lingkungan browser. Trik ini adalah untuk membantu pengembangan sehingga kode Anda dapat berjalan di browser DAN node / elektron tanpa konfigurasi tambahan. Ada banyak cara lain untuk melakukannya tetapi ini adalah IMHO paling sederhana.
Dale Harders
1
Ini bermasalah dengan CSP — tidak ada skrip sebaris
Trevor
121

Seperti yang terlihat di https://github.com/atom/electron/issues/254 masalahnya disebabkan karena kode ini:

if ( typeof module === "object" && typeof module.exports === "object" ) {
  // set jQuery in `module`
} else {
  // set jQuery in `window`
}

Kode jQuery "melihat" bahwa itu berjalan di lingkungan CommonJS dan mengabaikan window.

Solusinya sangat mudah , alih-alih memuat jQuery <script src="...">, Anda harus memuat seperti ini:

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

Catatan: titik sebelum jalur diperlukan , karena ini menunjukkan bahwa itu adalah direktori saat ini. Juga, ingatlah untuk memuat jQuery sebelum memuat plugin lain yang bergantung padanya .

Bruno Vaz
sumber
1
Terima kasih, tetapi saya memiliki sistem yang dibuat oleh yeoman dengan sudut. Grunt mengambil semua dependensi bower saya dan membuatnya menjadi file vendor.js. Bagaimana saya bisa memuat jquery, memperbaiki dengan baris Anda, dan melanjutkan dengan dependensi bower lain yang membutuhkan jquery?
bluesky777
Saya tidak mengerti, vendor. Saya punya jquery di dalam? Jika demikian, Anda dapat memuat vendor.js dengan jendela ini. $ Method, afaik.
Bruno Vaz
Beberapa komentar kemudian dalam masalah terkait ada solusi yang lebih baik: 'node-integration': falsesebagai opsi untuk BrowserWindow.
Boldewyn
6
Bukankah ini memengaruhi hal-hal lain?
Bruno Vaz
53

Cara penulisan lainnya <script>window.$ = window.jQuery = require('./path/to/jquery');</script>adalah:

<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
Aaleks
sumber
Saya menemukan ini sebagai jawaban terbaik karena saya masih bisa menggunakan CDN dengan itu! Dan tidak perlu menimpa apa pun.
patotoma
53

jawaban FAQ elektron:

http://electron.atom.io/docs/faq/

Saya tidak bisa menggunakan jQuery / RequireJS / Meteor / AngularJS di Electron.

Karena integrasi Node.js dari Electron, ada beberapa simbol tambahan yang dimasukkan ke dalam modul DOM seperti, ekspor, memerlukan. Ini menyebabkan masalah untuk beberapa perpustakaan karena mereka ingin menyisipkan simbol dengan nama yang sama.

Untuk mengatasi ini, Anda dapat mematikan integrasi simpul di Elektron:

// Dalam proses utama. 

let win = new BrowserWindow({  
 webPreferences: {
 nodeIntegration: false   } });

Tetapi jika Anda ingin mempertahankan kemampuan menggunakan Node.js dan Electron APIs, Anda harus mengganti nama simbol di halaman sebelum menyertakan pustaka lain:

<head> 
<script> 
window.nodeRequire = require; 
delete window.require;
delete window.exports; delete window.module; 
</script> 
<script type="text/javascript" src="jquery.js"></script> 
</head>
Fran6
sumber
@ Fran6 apa yang bisa saya lakukan jika saya memuat halaman eksternal? :(
georgiosd
Ini berhasil tetapi setelah melakukan ini aplikasi Elektron saya tidak mau menutup - yaitu, saya tidak bisa keluar dari halaman web.
tale852150
34

Baru saja menemukan masalah yang sama

npm install jquery --save

<script>window.$ = window.jQuery = require('jquery');</script>

bekerja untukku

Dhaval Chauhan
sumber
Inilah yang dikatakan oleh jawaban asli saya.
Bruno Vaz
Hai caranya melakukan hal yang sama dengan materialize.min.js cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/… . .. sesuatu seperti ini <script> window.Materialize = window.Materialize = membutuhkan ('Materialize'); </script> ??? dapatkah seseorang membantu
Makjb lh
@ BrunoVaz jawaban ini lebih bersih :)
moeiscool
20

Anda dapat memasukkan node-integration: falseopsi ke dalam di BrowserWindow.

misalnya: window = new BrowserWindow({'node-integration': false});

Murilo Feres
sumber
4
Ini adalah solusi yang baik untuk pengguna yang tidak memerlukan integrasi node.
Adam Szmyd
Ini luar biasa, sangat cocok untuk saya. Terima kasih @Murilo Feres. Adakah yang dilakukan opsi-opsi simpul-integrasi?
Ahesanali Suthar
3
tidak berfungsi @ 1.4, silakan gunakan: let win = new BrowserWindow ({webPreferences: {nodeIntegration: false}})
holly
14

Solusi yang bagus dan bersih

  1. Instal jQuery menggunakan npm. ( npm install jquery --save)
  2. Gunakan: <script> let $ = require("jquery") </script>
adgelbfish
sumber
8

Saya menghadapi masalah yang sama dan ini berhasil untuk saya!

Instal jQuery menggunakan npm

$ npm install jquery

Kemudian sertakan jQuery dalam salah satu cara berikut.

Menggunakan tag skrip

<script>window.$ = window.jQuery = require('jquery');</script>

Menggunakan Babel

import $ from 'jquery';

Menggunakan Webpack

const $ = require('jquery');
Abraham Hernandez
sumber
5

Saya pikir saya mengerti perjuangan Anda saya menyelesaikannya sedikit berbeda. Saya menggunakan skrip loader untuk file js saya yang termasuk jquery.Script loader mengambil file js Anda dan melampirkannya ke atas file vendor.js Anda itu melakukan keajaiban bagi saya.

https://www.npmjs.com/package/script-loader

setelah menginstal skrip, tambahkan ini ke boot atau file aplikasi Anda.

impor 'script! path / your-file.js';

Mertcan Diken
sumber
4

ok, inilah pilihan lain, jika Anda ingin kerabat menyertakan ...

<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>
aestrro
sumber
3

Jika Anda menggunakan Angular2 Anda dapat membuat file js baru dengan kode ini:

// jquery-electron.js

if ((!window.jQuery || !window.$) && (!!module && !!module.exports)) {
      window.jQuery = window.$ = module.exports;
}

dan letakkan di sebelah kanan setelah jquery path, di .angular-cli.json:

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "assets/js/jquery-electron.js",
    ...
    ...
]
Maks
sumber
3

im bangunan dan Aplikasi Angular dengan elektron, solusi saya adalah sebagai berikut:

index.html

<script>
    if ( typeof module === "object" && typeof module.exports === "object" ) {
      window.$ = window.jQuery = require('jquery');
    }
</script>

angular.json

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Jadi Jquery akan diambil dari angular.json jika di browser, selain itu jika itu adalah aplikasi yang dibangun dengan elektron, ia akan memerlukan modul sebagai gantinya.

Jika Anda ingin mengimpor jquery di index.html alih-alih mengimpor dari angular.json gunakan solusi berikut:

<script src="path/to/jquery"></script>
<script>
    if ( typeof module === "object" && typeof module.exports === "object" ) {
      window.$ = window.jQuery = require('jquery');
    }
</script>
Kuburan Kuza
sumber
2

bekerja untuk saya menggunakan kode berikut 

var $ = require('jquery')
Adeojo Emmanuel IMM
sumber
2

1. Instal jQuery menggunakan npm. 

npm install jquery --save

2.

<!--firstly try to load jquery as browser-->
<script src="./jquery-3.3.1.min.js"></script>
<!--if first not work. load using require()-->
<script>
  if (typeof jQuery == "undefined"){window.$ = window.jQuery = require('jquery');}
</script>
Alexey Kolotsey
sumber
2

Ini bekerja untuk saya.

<script languange="JavaScript">
     if (typeof module === 'object') {window.module = module; module = undefined;}
</script>

Hal yang perlu dipertimbangkan:

1) Letakkan ini di bagian sebelum </head>

2) Sertakan Jquery.min.js atau Jquery.js tepat sebelum </body>tag

Vishal Goyal
sumber
0

Anda dapat mencoba kode berikut:

mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration:false,
        }
});
shuoGG
sumber
0

Untuk masalah ini, Gunakan JQuery dan js lainnya yang sama seperti yang Anda gunakan di Halaman Web. Namun, Elektron memiliki integrasi simpul sehingga tidak akan menemukan objek js Anda. Anda harus mengatur module = undefinedsampai objek js Anda dimuat dengan benar. Lihat contoh di bawah ini

<!-- Insert this line above local script tags  -->
<script>if (typeof module === 'object') {window.module = module; module = 
undefined;}</script>

<!-- normal script imports etc  -->
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>    

<!-- Insert this line after script tags -->
<script>if (window.module) module = window.module;</script>

Setelah mengimpor seperti yang diberikan, Anda akan dapat menggunakan JQuerydan hal-hal lain dalam elektron.

Kiran Maniya
sumber
0

Cukup instal Jquery dengan perintah berikut.

npm install --save jquery

Setelah itu Silakan masukkan baris belew di file js yang ingin Anda gunakan Jquery

let $ = require('jquery')
Milan Hirpara
sumber