Electron: jQuery не визначено

315

Проблема: під час розробки за допомогою 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чи щось для цього.

jquery  electron 
— Бруно Ваз
джерело
Чому б просто не використовувати функцію Electron require?

Відповіді:

759

Краще і загальне рішення ІМО: 

<!-- 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) без необхідності вказувати кожну
  • Створення сценарію / Пакет для друку (тобто Grunt / Gulp всі сценарії в vendor.js)
  • НЕ вимагає node-integrationбути помилковим

джерело тут

— Дейл Хардерс
джерело
1
@fareednamrouti Так, але суть цього рішення полягала в тому, що вам не доведеться перераховувати сторонні бібліотеки (це просто працює!). Зручно, коли ви імпортуєте багато бібліотек (або самостійно пакетних сценаріїв)
— Дейл Хардерс
2
Дякую! у моєму випадку це рішення також працює для старих версій d3, таких як d3 v3 або нижче
— headwinds
2
@DaleHarders Виявляється, window.moduleпочинається з того ж значення module, що і ваш код працює не так, як очікувалося. Правильний спосіб зробити це - зберегти moduleнатомість якусь іншу (невикористану) властивість вікна, наприклад, як window.tempModule. Щоб підтвердити те, що я кажу, спробуйте console.log(module)після останнього твердження, щоб перевірити це зараз module === undefined.
— Лусіо Паїва
1
@Lucio Nope. Нам потрібно зберегти до window.module, оскільки саме там очікують сторонні бібліотеки (середовище браузера). Я думаю, що ви плутаєте середовище Node.js та браузера. Ця хитрість полягає в допомозі в розробці, щоб ваш код міг працювати в браузері AND на вузлі / електроні без додаткової конфігурації. Є багато інших способів зробити це, але це найпростіший IMHO.
— Дейл Хардерс
1
Це проблематично для CSP - немає вбудованих сценаріїв
— Тревор
121

Як видно з https://github.com/atom/electron/isissue/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 перед завантаженням будь-якого іншого плагіна, який залежить від нього .

— Бруно Ваз
джерело
1
Дякую, але у мене є система, створена yeoman з кутовою. Grunt приймає всі мої залежності від бауера і вбудовує їх у файл vendor.js. Як я можу завантажити jquery, виправити ваш рядок та продовжувати інші залежності, що потребують jquery?
— bluesky777
Я не розумію, що vendor.js має jquery всередині? Якщо це так, ви можете завантажити vendor.js у цьому вікні. $ Method, afaik.
— Бруно Ваз
Кілька коментарів пізніше у пов'язаному питанні є ще кращим рішенням: 'node-integration': falseяк варіант для BrowserWindow.
— Болдевін
6
Це не впливає на інші речі?
— Бруно Ваз
53

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

<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
— Алеакс
джерело
Я вважав це найкращою відповіддю, тому що я все ще можу використовувати CDN з ним! І не потрібно нічого перезаписувати.
— patotoma
53

відповідь електронних питань:

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

Я не можу використовувати jQuery / RequireJS / Meteor / AngularJS в Electron.

Завдяки інтеграції Electron у Node.js є деякі додаткові символи, вставлені в DOM, наприклад, модуль, експорт, вимагає. Це спричиняє проблеми для деяких бібліотек, оскільки вони хочуть вставити символи з однаковими іменами.

Щоб вирішити це, ви можете вимкнути інтеграцію вузлів в Electron:

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

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

Але якщо ви хочете зберегти можливості використання API Node.js та Electron, вам слід перейменувати символи на сторінці, перш ніж включати інші бібліотеки:

<head> 
<script> 
window.nodeRequire = require; 
delete window.require;
delete window.exports; delete window.module; 
</script> 
<script type="text/javascript" src="jquery.js"></script> 
</head>
— Фран6
джерело
@ Fran6, що я можу зробити, якщо завантажую зовнішню сторінку? :(
— georgiosd
Це спрацювало, але після цього мій додаток Electron не закриється - тобто я не зміг вийти з веб-сторінки.
— tale852150
34

Щойно натрапив на цю ж проблему

npm install jquery --save

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

працював на мене

— Дхаваль Чахан
джерело
Саме так сказано в моїй оригінальній відповіді.
— Бруно Ваз
Привіт, як це зробити з materialize.min.js cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/… . .. щось на кшталт цього <script> window.Materialize = window.Materialize = need ('Materialize'); </script> ??? може хтось допоможе
— Makjb lh
@BrunoVaz ця відповідь чистіша :)
— moeiscool
20

Ви можете розмістити node-integration: falseпараметри всередині браузера.

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

— Муріло Ферес
джерело
4
Це хороше рішення для користувачів, яким не потрібна інтеграція вузлів.
— Адам Шмид
Це дивовижно, прекрасно працює для мене. Дякуємо @Murilo Feres. Будь-які способи, що роблять параметри інтеграції вузлів?
— Ahesanali Suthar
3
не працює @ 1.4, будь ласка, використовуй: нехай win = нове вікно браузера ({webPreferences: {nodeIntegration: false}})
— Холлі
14

Приємне і чисте рішення

  1. Встановіть jQuery за допомогою npm. ( npm install jquery --save)
  2. Використай це: <script> let $ = require("jquery") </script>
— молюски
джерело
8

Я стикаюся з тим же питанням, і це працювало для мене!

Встановіть jQuery за допомогою npm

$ npm install jquery

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

Використання тегу сценарію

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

Використання Вавілони

import $ from 'jquery';

Використання Webpack

const $ = require('jquery');
— Авраам Ернандес
джерело
5

Я думаю, що я розумію вашу боротьбу, я вирішив її трохи інакше. Я використовував завантажувач скриптів для мого файлу js, який включає jquery.Script завантажувач, приймає ваш файл js і приєднує його до вашого файлу vendor.js, він зробив магію для мене.

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

після встановлення завантажувача сценаріїв додайте це у завантажувальний файл або файл програми.

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

— Мерткан Дікен
джерело
4

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

<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>
— естерро
джерело
3

Якщо ви використовуєте 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

я будую і 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

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

Це працює для мене.

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

Що слід врахувати:

1) Помістіть це в розділі прямо раніше </head>

2) Включіть Jquery.min.js або Jquery.js безпосередньо перед </body>тегом

— Вішал Гоял
джерело
0

ви можете спробувати наступний код:

mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration:false,
        }
});
— shuoGG
джерело
0

Для цього питання використовуйте 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та інші речі в електроні.

— Кіран Манія
джерело
0

Просто встановіть Jquery з наступною командою.

npm install --save jquery

Після цього, будь ласка, покладіть рядок belew у js файл, який ви хочете використовувати Jquery

let $ = require('jquery')
— Мілан Гірпара
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.