Электрон: jQuery не определен

Question

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

352

jquery electron

Источник

user4755435 17 сен '15 в 03:06

21 ответ

Решение

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

130

Источник

user4755435 17 сен '15 в 03:06

Еще один способ написания <script>window.$ = window.jQuery = require('./path/to/jquery');</script> является:

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

57

Источник

user3343399 19 янв '16 в 16:02

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

56

Источник

user5049487 11 июл '16 в 16:01

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

npm install jquery --save

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

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

37

Источник

user3314614 08 окт '16 в 16:21

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

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

22

Источник

user2576754 11 янв '16 в 13:02

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

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

14

Источник

user3549896 19 май '17 в 08:46

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

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

npm i jquery

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

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

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

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

import $ from "jquery";

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

var $ = require('jquery')

9

Источник

user7602110 13 сен '18 в 04:09

<script>
  delete window.module;
</script>

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

6

Источник

user543601 29 окт '17 в 01:21

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

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

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

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

5

Источник

user6265549 28 апр '16 в 08:34

Просто установите Jquery с помощью следующей команды.

npm install --save jquery

После этого поместите белую строку в файл js, который вы хотите использовать JQuery.

let $ = require('jquery')

5

Источник

user7825922 30 дек '19 в 16:56

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

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

4

Источник

user1207404 02 май '17 в 20:33

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

3

Источник

user7806306 22 ноя '18 в 09:48

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

3

Источник

user1471587 18 апр '18 в 10:19

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

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

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

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

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

2

Источник

user7390321 14 ноя '18 в 06:48

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>

2

Источник

user5113803 31 июл '18 в 05:51

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

var $ = require('jquery')

2

Источник

user7940129 23 апр '18 в 06:46

Для решения этой проблемы используйте 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 и прочее в электроне.

1

Источник

user8203357 14 авг '19 в 08:23

Ну в 2022 году. Это сработало для меня.

Установить JQuery

      npm install jquery --save

Использоватьscriptтег, чтобы добавить jquery в вашindex.htmlфайл. srcдолжен быть путь к jquery в вашемnode_modulesпапка

          <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>

Теперь JQuery будет доступен/определен как$в вашем процессе визуализации (renderer.jsфайл)

1

Источник

user2099437 15 июл '22 в 08:04

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

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

1

Источник

user7888666 11 июл '19 в 14:38

Установите jquery с помощью пряжи

      yarn add jquery

0

Источник

Syamdas 03 авг '22 в 12:07

Другие вопросы по тегам jquery electron

user3097649 27 май '16 в 10:01 2016-05-27 10:01 · Accepted Answer · 2016-05-27 10:01

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

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