전자 : 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를로드해야합니다 .
전자 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>
쓰는 또 다른 방법 <script>window.$ = window.jQuery = require('./path/to/jquery');</script>은 다음과 같습니다.
<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
이 같은 문제가 발생했습니다.
npm install jquery --save
<script>window.$ = window.jQuery = require('jquery');</script>
나를 위해 일했다
node-integration: falseBrowserWindow에 옵션을 넣을 수 있습니다 .
예 : window = new BrowserWindow({'node-integration': false});
훌륭하고 깨끗한 솔루션
- npm을 사용하여 jQuery를 설치하십시오. (
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';
좋아, 여기에 다른 포함을 원한다면 다른 옵션이 있습니다 ...
<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>
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",
...
...
]
다음 코드를 사용하여 나를 위해 일했습니다.
var $ = require('jquery')
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>
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>
이것은 나를 위해 작동합니다.
<script languange="JavaScript">
if (typeof module === 'object') {window.module = module; module = undefined;}
</script>
고려해야 할 사항 :
1) 이것을 바로 섹션에 넣으십시오. </head>
2) </body>태그 바로 앞에 Jquery.min.js 또는 Jquery.js 포함
다음 코드를 사용해보십시오.
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration:false,
}
});
이 문제의 경우 웹 페이지에서 사용하는 것과 동일한 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전자에서 그리고 다른 것들을 사용할 수 있습니다 .
참고 URL : https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined
'Programing' 카테고리의 다른 글
| 바닥 글 바닥 글 플러시, 트위터 부트 스트랩 (0) | 2020.03.21 |
|---|---|
| node.js에서 로컬 IP 주소 가져 오기 (0) | 2020.03.21 |
| JavaScript 객체 키 목록 가져 오기 (0) | 2020.03.20 |
| 안전하고 효율적인 방법으로 파일 복사 (0) | 2020.03.20 |
| 기본 인증의 "영역"은 무엇입니까 (0) | 2020.03.20 |