it-roy-ru.com

Электрон: 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>

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

257
Bruno Vaz

Лучшее и более общее решение 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>

Выгоды

  • Работает как для браузера, так и для электронного с тем же кодом
  • Исправляет проблемы для ВСЕХ сторонних библиотек (не только jQuery) без необходимости указывать каждую
  • Script Build/Pack Friendly (то есть Grunt/Gulp все скрипты в vendor.js)
  • НЕ требует, чтобы node-integration был ложным

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

651
Dale Harders

Как видно из 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 перед загрузкой любого другого подключаемого модуля, который зависит от него.

111
Bruno Vaz

Другой способ записи <script>window.$ = window.jQuery = require('./path/to/jquery');</script>

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

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

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

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

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

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

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

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

Но если вы хотите сохранить возможности использования Node.js и Electron 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>
47
Fran6

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

npm install jquery --save

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

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

27
Dhaval Chauhan

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

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

17
Murilo Feres

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

  1. Установите jQuery, используя npm. (npm install jquery --save)
  2. Используйте это: <script> let $ = require("jquery") </script>
11
adgelbfish
<script>
  delete window.module;
</script>

до импорта JQuery, и вы готовы. Более подробная информация здесь .

5
Sagiv Ofek

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

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

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

импортировать 'script! path/your-file.js';

4
Mertcan Diken

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

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

я строю и Angular App с электроном, мое решение было следующее:

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

Таким образом, Jquery загружается из angular.json, если в браузере, в противном случае, если это приложение, созданное с помощью электронов, для него потребуется модуль.

Если вы хотите импортировать jquery в index.html вместо импорта из angular.json, используйте следующее решение:

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

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

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

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

// jquery-electron.js

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

и поместите его сразу после пути jquery, в .angular-cli.json:

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

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

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

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

npm i jquery

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

Использование тега Script

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

Используя Вавилон

import $ from "jquery";

Использование Webpack

var $ = require('jquery')
0
Carlos Abraham

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

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

Что нужно учитывать:

1) Поместите это в раздел прямо перед </head>

2) Включите Jquery.min.js или Jquery.js прямо перед тегом </body>

0
Vishal Goyal