web-dev-qa-db-ja.com

Electron：jQueryが定義されていません

問題：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か何かその効果のあるものを見るべきです。

jqueryelectron
273
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だけではない）の問題を修正
  • スクリプト作成/パックフレンドリー（すなわち、Grunt/Gulpすべてのスクリプトをvendor.jsに）
  • node-integrationをfalseにする必要はありません

ソース ここ

669
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を無視します。

解決策は本当に簡単です 、<script src="...">を通してjQueryをロードする代わりに、あなたはこのようにロードするべきです：

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

注： パスの前のドットが必要は、それが現在のディレクトリであることを示すためです。また、それに依存する他のプラグインをロードする前にjQueryをロードすることを忘れないでください。

111
Bruno Vaz

電子FAQ回答：

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

ElectronではjQuery/RequireJS/Meteor/AngularJSを使用できません。

Node.jsとElectronの統合により、module、exports、requireのように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>
51
Fran6

<script>window.$ = window.jQuery = require('./path/to/jquery');</script>を書く別の方法は、

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

ちょうど同じ問題に出くわした

npm install jquery --save

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

私のために働いた

28
Dhaval Chauhan

あなたはBrowserWindowのオプションの中にnode-integration: falseを置くことができます。

例：window = new BrowserWindow({'node-integration': false});

17
Murilo Feres

すてきなきれいな解決策

  1. Npmを使ってjQueryをインストールします。 （npm install jquery --save）
  2. それを使ってください：<script> let $ = require("jquery") </script>
11
adgelbfish
<script>
  delete window.module;
</script>

あなたのjqueryをインポートする前に、あなたは行ってもいいです。 詳細はこちら 。

5
Sagiv Ofek

Jqueryを含むjsファイルにはスクリプトローダーを使用しました。スクリプトローダーは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

私は同じ問題に直面し、これは私のために働いた！

jQueryをインストール using npm 

$ npm install jquery

次に、以下のいずれかの方法でjQueryを組み込みます。

Scriptタグを使う

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

Babelを使う

import $ from 'jquery';

Webpackを使う

const $ = require('jquery');
2
Carlos Abraham

電子ビルとAngularアプリのim建物と私の解決策は次のとおりです。

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>
2
Kuza Grave

次のコードを使用して私のために働いた

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

Angular 2を使用している場合は、次のコードで新しいjsファイルを作成できます。

// jquery-electron.js

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

そしてそれを.angular-cli.jsonの中のjquery pathの直後に置きます。

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

1.npmを使用してjQueryをインストールします。

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

これは私のために働きます。

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

考慮すべきこと：

1）これを</head>の直前のセクションに入れる

2）</body>タグの直前にJquery.min.jsまたはJquery.jsを含める

1
Vishal Goyal

次のコードを試すことができます。

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

この問題については、Webページで使用しているものと同じJQueryおよびその他のjsを使用してください。ただし、Electronにはノードが統合されているため、jsオブジェクトが見つかりません。 jsオブジェクトが適切にロードされるまで、module = undefinedを設定する必要があります。以下の例を参照してください

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