問題：Electronを使用して開発しているときに、jQueryを必要とするJSプラグインを使用しようとすると、スクリプトタグを使用して正しいパスにロードしても、プラグインが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かその効果に何かを見るべきです。
回答:
より優れた、より一般的なソリューション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>利点
node-integration偽である必要はありませんここにソース
window.module同じ値で始まるmoduleため、コードは期待どおりに機能しません。これを行う適切な方法は、module代わりに、他の（未使用の）ウィンドウプロパティに保存することですwindow.tempModule。私の言っていることを確認するには、console.log(module)最後のステートメントの後で試してみてくださいmodule === undefined。
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ます。
解決策は本当に簡単<script src="...">です。jQueryをでロードする代わりに、次のようにロードする必要があります。
<script>window.$ = window.jQuery = require('./path/to/jquery');</script>注： パスの前のドットは、現在のディレクトリであることを示しているため、必須です。また、それに依存する他のプラグインをロードする前に、jQueryをロードすることを忘れないでください。
'node-integration': falseがあります：のオプションとしてBrowserWindow。
電子FAQの回答：
http://electron.atom.io/docs/faq/
ElectronでjQuery / RequireJS / Meteor / AngularJSを使用できません。
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>ちょうどこの同じ問題に遭遇しました
npm install jquery --save
<script>window.$ = window.jQuery = require('jquery');</script>
私のために働いた
node-integration: falseBrowserWindowの内部オプションを配置できます。
例えば： window = new BrowserWindow({'node-integration': false});
素敵でクリーンなソリューション
npm install jquery --save）<script> let $ = require("jquery") </script>私は同じ問題に直面し、これは私のために働いた！
npmを使用してjQueryをインストールする
$ npm install jquery次に、次のいずれかの方法でjQueryを含めます。
スクリプトタグの使用
<script>window.$ = window.jQuery = require('jquery');</script>Babelの使用
import $ from 'jquery';Webpackの使用
const $ = require('jquery');私はあなたの苦労を少し違った方法で解決したと思います.jqueryを含む私のjsファイルにスクリプトローダーを使用しました。スクリプトローダーはjsファイルを取得し、それをvendor.jsファイルの上部に添付することで、私にとって魔法をかけました。
https://www.npmjs.com/package/script-loader
スクリプトローダーをインストールした後、これをブートファイルまたはアプリケーションファイルに追加します。
import 'script！path / your-file.js';
Angular2を使用している場合は、次のコードで新しいjsファイルを作成できます。
// jquery-electron.js
if ((!window.jQuery || !window.$) && (!!module && !!module.exports)) {
window.jQuery = window.$ = module.exports;
}.angular-cli.jsonのjqueryパスの直後に配置します。
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"assets/js/jquery-electron.js",
...
...
]imビルドと電子を使ったAngularアプリの場合、私の解決策は次のとおりです。
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から読み込まれ、それ以外の場合は電子ビルドアプリの場合はモジュールが必要になります。
angular.jsonからインポートするのではなく、index.htmlにjqueryをインポートする場合は、次のソリューションを使用します。
<script src="path/to/jquery"></script>
<script>
if ( typeof module === "object" && typeof module.exports === "object" ) {
window.$ = window.jQuery = require('jquery');
}
</script>次のコードを使用して私のために働いた
var $ = require('jquery')1. npmを使用してjQueryをインストールします。
npm install jquery --save2。
<!--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>この問題については、Webページで使用しているのと同じJQueryおよびその他のjsを使用します。ただし、Electronにはノード統合があるため、jsオブジェクトは見つかりません。module = undefinedjsオブジェクトが正しくロードされるまで設定する必要があります。以下の例を参照
<!-- 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>与えられたようにインポートした後、あなたはJQueryelectronで他のものを使用できるようになります。
require機能を使用しないのはなぜですか？