문제 : 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: false
BrowserWindow에 옵션을 넣을 수 있습니다 .
예 : window = new BrowserWindow({'node-integration': false});
답변
훌륭하고 깨끗한 솔루션
- npm을 사용하여 jQuery를 설치하십시오. (
npm install jquery --save
) - 그걸 써:
<script> let $ = require("jquery") </script>