Electron: jQuery не определен

проблема: при разработке с использованием Electron, когда вы пытаетесь использовать любой плагин JS, который требует jQuery, плагин не находит jQuery, даже если вы загружаете в правильном пути с помощью тегов скрипта.

например,

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

запуск этого кода выше не будет работать. В самом деле, откройте инструменты разработчика, перейти к просмотру консоли, и нажмите на кнопку <p> элемент. Вы бы видели, что function $ is not defined или что-то в этом роде.

14 234
jquery electron

14 ответов:

лучше более общее решение ИМО:

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

преимущества

  • работает как для браузера, так и для электрона с одним и тем же кодом
  • исправляет проблемы для всех сторонних библиотек (не только jQuery) без необходимости указывать каждый из них
  • Script Build / Pack Friendly (т. е. Grunt / Gulp все скрипты в поставщика.js)
  • не требуется node-integration ложные

источник здесь

599

как видно из https://github.com/atom/electron/issues/254 проблема вызвана из-за этого кода:

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

код jQuery "видит", что он работает в среде CommonJS и игнорирует window.

решение очень простое, вместо загрузки jQuery через <script src="...">, вы должны загрузить такой:

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

Примечание:точка перед путем требуется, так как это указывает, что это текущий каталог. Кроме того,не забудьте загрузить jQuery перед загрузкой любого другого плагина, который зависит от него.

102

другой способ написания <script>window.$ = window.jQuery = require('./path/to/jquery');</script> - это : 

<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
45

электронный FAQ ответ:

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

Я не могу использовать jQuery/RequireJS/Meteor/AngularJS в Electron.

из-за узла.JS интеграция электрона, есть некоторые дополнительные символы, вставленные в DOM, такие как модуль, экспорт, требуют. Этот вызывает проблемы для некоторых библиотек, так как они хотят вставить символы с одинаковыми названиями.

чтобы решить эту проблему, можно отключить узел интеграция в Электрон:

// в основном процессе. 

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

но если вы хотите сохранить возможности использования узла.js и Электрон API, вы должны переименовать символы на странице перед включением другие библиотеки:

<head> 
<script> 
window.nodeRequire = require; 
delete window.require;
delete window.exports; delete window.module; 
</script> 
<script type="text/javascript" src="jquery.js"></script> 
</head>
44

просто наткнулся на эту же проблему

npm install jquery --save

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

работал для меня

23

можно поставить node-integration: false внутренние параметры на BrowserWindow.

например: window = new BrowserWindow({'node-integration': false});

15

хорошее и чистое решение

  1. установите jQuery с помощью npm. (npm install jquery --save)
  2. использовать: <script> let $ = require("jquery") </script>
10

Я думаю, что понимаю вашу борьбу я решил ее немного по-другому.Я использовал загрузчик скриптов для моего JS-файла, который включает jquery.Загрузчик скриптов берет ваш js-файл и прикрепляет его к верхней части вашего поставщика.js file он сделал волшебство для меня.

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

после установки загрузчика скриптов добавьте это в файл загрузки или приложения.

"импорт"!путь/ваш файл.js';
4

хорошо, вот еще один вариант, если вы хотите, чтобы родственник включал...

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

перед импортом jquery, и вы хорошо идти. подробнее здесь.

3

работал для меня, используя следующий код 

var $ = require('jquery')
2

Если вы используете Angular2, вы можете создать новый js-файл с этим кодом:

// jquery-electron.js

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

и поставить его сразу после пути jquery, В.угловой-кли.json:

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "assets/js/jquery-electron.js",
    ...
    ...
]
1

1.Установите jQuery с помощью 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>
1

я сталкиваюсь с той же проблемой, и это работает для меня!

установить jQuery используя npm

npm i jquery

затем включите jQuery одним из следующих способов.

С помощью тега 

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

Используя Babel

import $ from "jquery";

С Помощью Webpack

var $ = require('jquery')
0