[jquery] 전자 : 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또는 그 효과에 무언가를 보아야합니다 .



답변

더 좋고 일반적인 솔루션 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거짓 일 필요 는 없다

여기에 소스


답변

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를로드해야합니다 .


답변

쓰는 또 다른 방법 <script>window.$ = window.jQuery = require('./path/to/jquery');</script>은 다음과 같습니다.

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


답변

전자 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});


답변

훌륭하고 깨끗한 솔루션

  1. npm을 사용하여 jQuery를 설치하십시오. ( npm install jquery --save)
  2. 그걸 써: <script> let $ = require("jquery") </script>