Electron: jQuery không được xác định

315

Vấn đề: trong khi phát triển bằng Electron, khi bạn cố gắng sử dụng bất kỳ plugin JS nào yêu cầu jQuery, plugin không tìm thấy jQuery, ngay cả khi bạn tải đúng đường dẫn bằng thẻ script.

Ví dụ,

<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>

Chạy mã này ở trên sẽ không hoạt động. Trong thực tế, hãy mở DevTools, đi đến giao diện Console và nhấp vào <p>phần tử. Bạn sẽ thấy điều đó function $ is not definedhoặc một cái gì đó để có hiệu lực.

jquery  electron 
— Bruno Vaz
nguồn
Tại sao không chỉ sử dụng requirechức năng Electron ?

Câu trả lời:

761

Một giải pháp tốt hơn và chung chung hơn IMO: 

<!-- 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>

Những lợi ích

  • Hoạt động cho cả trình duyệt và điện tử có cùng mã
  • Khắc phục sự cố cho TẤT CẢ các thư viện của bên thứ 3 (không chỉ jQuery) mà không phải chỉ định từng thư viện
  • Script Build / Pack Friendly (tức là Grunt / Gulp tất cả các script thành Vend.js)
  • KHÔNG yêu cầu node-integrationsai

nguồn ở đây

— Dale cứng
nguồn
1
@fareednamrouti Có, nhưng quan điểm của giải pháp này là bạn không phải liệt kê các thư viện của bên thứ 3 (nó chỉ hoạt động!). Tiện dụng khi bạn đang nhập nhiều thư viện (hoặc tập lệnh tự đóng gói)
— Dale Harders
2
cảm ơn! trong trường hợp của tôi, giải pháp này cũng hoạt động cho các phiên bản cũ của d3 như d3 v3 trở xuống
— cơn gió đầu
2
@DaleHarders Hóa ra window.modulebắt đầu với cùng một giá trị module, vì vậy mã của bạn không hoạt động như mong đợi. Cách thích hợp để làm điều đó là lưu modulevào một số thuộc tính cửa sổ khác (không sử dụng) thay vào đó, như thế nào window.tempModule. Để xác nhận những gì tôi nói, hãy thử console.log(module)sau tuyên bố cuối cùng của bạn để xác minh điều đó ngay bây giờ module === undefined.
— Lucio Paiva
1
@Lucio Không. Chúng ta cần lưu vào window.module vì đây là nơi các thư viện bên thứ 3 đang mong đợi nó (môi trường trình duyệt). Tôi nghĩ rằng bạn đang nhầm lẫn Node.js và môi trường trình duyệt. Thủ thuật này là để hỗ trợ phát triển để mã của bạn có thể chạy trong trình duyệt VÀ nút / electron mà không cần bất kỳ cấu hình bổ sung nào. Có nhiều cách khác để làm điều đó nhưng đây là IMHO đơn giản nhất.
— Dale Harders
1
Đây là vấn đề với CSP, không có tập lệnh nội tuyến
— Trevor
121

Như đã thấy trong https://github.com/atom/electron/issues/254, sự cố được gây ra do mã này:

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

Mã jQuery "thấy" rằng nó đang chạy trong môi trường CommonJS và bỏ qua window.

Giải pháp thực sự dễ dàng , thay vì tải jQuery qua <script src="...">, bạn nên tải như thế này:

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

Lưu ý: dấu chấm trước đường dẫn là bắt buộc , vì nó chỉ ra rằng đó là thư mục hiện tại. Ngoài ra, hãy nhớ tải jQuery trước khi tải bất kỳ plugin nào khác phụ thuộc vào nó .

— Bruno Vaz
nguồn
1
Cảm ơn, nhưng tôi có một hệ thống được tạo bởi yeoman với góc cạnh. Grunt lấy tất cả các phụ thuộc bower của tôi và xây dựng chúng thành một tập tin của nhà cung cấp. Làm cách nào tôi có thể tải jquery, sửa chữa với dòng của bạn và tiếp tục với các phụ thuộc bower khác cần jquery?
— bluesky777
Tôi không hiểu, các nhà cung cấp có jquery bên trong? Nếu vậy, bạn có thể tải nhà cung cấp.js bằng cửa sổ này. $ Phương thức, afaik.
— Bruno Vaz
Một số ý kiến ​​sau này trong vấn đề được liên kết có một giải pháp thậm chí tốt hơn: 'node-integration': falsenhư là tùy chọn cho BrowserWindow.
— Boldewyn
6
Điều này không ảnh hưởng đến những thứ khác?
— Bruno Vaz
53

Một cách viết khác <script>window.$ = window.jQuery = require('./path/to/jquery');</script>là:

<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
— Aaleks
nguồn
Tôi thấy đây là câu trả lời tốt nhất vì tôi vẫn có thể sử dụng CDN với nó! Và không cần ghi đè lên bất cứ điều gì.
— patotoma
53

Câu hỏi thường gặp về điện tử:

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

Tôi không thể sử dụng jQuery / RequireJS / Meteor / AngularJS trong Electron.

Do sự tích hợp Node.js của Electron, có một số ký hiệu bổ sung được chèn vào DOM như mô-đun, xuất khẩu, yêu cầu. Điều này gây ra vấn đề cho một số thư viện vì họ muốn chèn các biểu tượng có cùng tên.

Để giải quyết vấn đề này, bạn có thể tắt tích hợp nút trong Electron:

// Trong quy trình chính. 

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

Nhưng nếu bạn muốn giữ khả năng sử dụng API Node.js và Electron, bạn phải đổi tên các biểu tượng trong trang trước khi bao gồm các thư viện khác:

<head> 
<script> 
window.nodeRequire = require; 
delete window.require;
delete window.exports; delete window.module; 
</script> 
<script type="text/javascript" src="jquery.js"></script> 
</head>
— Tiếng Anh
nguồn
@ Fran6 Tôi có thể làm gì nếu tôi đang tải một trang bên ngoài? :(
— georgiosd
Điều này đã hoạt động nhưng sau khi làm điều này, ứng dụng Electron của tôi sẽ không đóng - nghĩa là tôi không thể thoát khỏi trang web.
— tale852150
34

Chỉ gặp phải vấn đề tương tự

npm install jquery --save

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

đã làm cho tôi

— Pháp thân
nguồn
Đây chính xác là những gì câu trả lời ban đầu của tôi nói.
— Bruno Vaz
Xin chào làm thế nào để làm tương tự với vật liệu.min.js cdnjs.cloudflare.com/ajax/libs/m vật liệu / 0,98.2 / js / trên . .. một cái gì đó như thế này <script> window.M vật liệu = cửa sổ. Vật liệu = yêu cầu ('Vật liệu hóa'); </ script> ??? ai đó có thể giúp đỡ
— Makjb lh
@BrunoVaz câu trả lời này sạch hơn :)
— moeiscool
20

Bạn có thể đặt node-integration: falsecác tùy chọn bên trong trên BrowserWindow.

ví dụ: window = new BrowserWindow({'node-integration': false});

— Murilo Feres
nguồn
4
Đây là giải pháp tốt cho người dùng không cần tích hợp nút.
— Adam Szmyd
Điều này là tuyệt vời, hoàn toàn làm việc cho tôi. Cảm ơn @Murilo Feres. Bất kỳ cách nào các tùy chọn tích hợp nút không?
— Ahesanali Suthar
3
không hoạt động @ 1.4, vui lòng sử dụng: let win = new BrowserWindow ({webPreferences: {nodeIntegration: false}})
— holly
14

Một giải pháp tốt đẹp và sạch sẽ

  1. Cài đặt jQuery bằng npm. ( npm install jquery --save)
  2. Sử dụng nó: <script> let $ = require("jquery") </script>
— cá adgelbfish
nguồn
8

Tôi phải đối mặt với cùng một vấn đề và điều này làm việc cho tôi!

Cài đặt jQuery bằng npm

$ npm install jquery

Sau đó, bao gồm jQuery theo một trong những cách sau.

Sử dụng thẻ script

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

Sử dụng Babel

import $ from 'jquery';

Sử dụng Webpack

const $ = require('jquery');
— Áp-ra-ham
nguồn
5

Tôi nghĩ rằng tôi hiểu cuộc đấu tranh của bạn, tôi đã giải quyết nó một chút khác biệt. Tôi đã sử dụng trình tải tập lệnh cho tệp js của tôi, trong đó có trình tải jquery.Script lấy tệp js của bạn và gắn nó vào đầu tệp của nhà cung cấp của bạn, nó đã làm nên điều kỳ diệu cho tôi.

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

Sau khi cài đặt trình tải tập lệnh, hãy thêm phần này vào tệp khởi động hoặc tệp ứng dụng của bạn.

nhập 'script! path / your-file.js';

— Mertcan Diken
nguồn
4

ok, đây là một lựa chọn khác, nếu bạn muốn có người thân bao gồm ...

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

Nếu bạn đang sử dụng Angular2, bạn có thể tạo tệp js mới với mã này:

// jquery-electron.js

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

và đặt nó ngay sau đường dẫn jquery, trong .angular-cli.json:

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "assets/js/jquery-electron.js",
    ...
    ...
]
— Tối đa
nguồn
3

Tôi đang xây dựng và ứng dụng Angular với electron, giải pháp của tôi là như sau:

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"
            ]

Vì vậy, Jquery được tải từ angular.json nếu trên trình duyệt, nếu không nó là một ứng dụng được xây dựng bằng điện tử, nó sẽ yêu cầu mô-đun thay thế.

Nếu bạn muốn nhập jquery trong index.html thay vì nhập từ angular.json, hãy sử dụng giải pháp sau:

<script src="path/to/jquery"></script>
<script>
    if ( typeof module === "object" && typeof module.exports === "object" ) {
      window.$ = window.jQuery = require('jquery');
    }
</script>
— Mộ Kuza
nguồn
2

1. Cài đặt jQuery bằng cách sử dụng 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
nguồn
2

Điều này làm việc cho tôi.

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

Những điều cần cân nhắc:

1) Đặt phần này vào phần ngay trước </head>

2) Bao gồm Jquery.min.js hoặc Jquery.js ngay trước </body>thẻ

— Vishal G lòng
nguồn
0

bạn có thể thử đoạn mã sau:

mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration:false,
        }
});
— shuoGG
nguồn
0

Đối với vấn đề này, Sử dụng JQuery và các js khác giống như bạn đang sử dụng trong Trang web. Tuy nhiên, Electron có tích hợp nút nên nó sẽ không tìm thấy các đối tượng js của bạn. Bạn phải đặt module = undefinedcho đến khi các đối tượng js của bạn được tải đúng cách. Xem ví dụ dưới đây

<!-- 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>

Sau khi nhập như đã cho, bạn sẽ có thể sử dụng JQueryvà những thứ khác trong điện tử.

— Kiran Maniya
nguồn
0

Chỉ cần cài đặt Jquery với lệnh sau.

npm install --save jquery

Sau đó, vui lòng đặt dòng belew trong tệp js mà bạn muốn sử dụng Jquery

let $ = require('jquery')
— Milan Hirpara
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.