Электрон: 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 или что-то в этом роде.

Ответы

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

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

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

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

Чтобы решить эту проблему, вы можете отключить интеграцию node в 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>

Ответ 4

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

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

Ответ 5

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

npm install jquery --save

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

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

Установите jQuery с помощью npm

$ npm install jquery

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

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

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

Используя Babel

import $ from 'jquery';

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

const $ = require('jquery');

Ответ 10

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

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

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

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

Ответ 11

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

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

Ответ 12

Если вы используете 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",
    ...
    ...
]

Ответ 13

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

var $ = require('jquery')

Ответ 14

Я строю и 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>

Ответ 15

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>

Ответ 16

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

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

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

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

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

Ответ 17

Для быстрой загрузки используйте Google CDN

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Ответ 18

Вы можете попробовать следующий код:

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

Ответ 19

Для этой проблемы используйте JQuery и другие файлы js, которые вы используете на веб-странице. Однако у Electron есть интеграция узлов, поэтому он не найдет ваши объекты js. Вы должны установить module = undefined, пока ваши js-объекты не будут загружены правильно. Смотрите ниже пример

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

После импорта, как указано, вы сможете использовать JQuery и другие вещи в электронном виде.