문제 : 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.
솔루션은 정말 쉽습니다 .를 통해 jQuery를로드하는 대신 <script src="...">다음과 같이로드해야합니다.
<script>window.$ = window.jQuery = require('./path/to/jquery');</script>참고 : 경로 앞의 점 은 현재 디렉토리임을 나타내므로 필요합니다 . 또한 의존하는 다른 플러그인을로드하기 전에 jQuery를로드해야합니다 .
'node-integration': false이 BrowserWindow있습니다.
쓰는 또 다른 방법 <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});
훌륭하고 깨끗한 솔루션
npm install jquery --save)<script> let $ = require("jquery") </script>나는 같은 문제에 직면했고 이것은 나를 위해 일했다!
npm을 사용하여 jQuery 설치
$ npm install jquery그런 다음 다음 방법 중 하나로 jQuery를 포함하십시오.
스크립트 태그 사용
<script>window.$ = window.jQuery = require('jquery');</script>바벨 사용
import $ from 'jquery';웹팩 사용
const $ = require('jquery');<script>
delete window.module;
</script>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 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에서로드되고, 그렇지 않으면 전자 빌드 응용 프로그램 인 경우 대신 모듈이 필요합니다.
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>이 문제의 경우 웹 페이지에서 사용하는 것과 동일한 JQuery 및 다른 j를 사용하십시오. 그러나 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>주어진 것과 같이 가져 오면 JQuery전자에 있는 것과 다른 것을 사용할 수 있습니다 .
require기능을 사용하지 않습니까?