programing

전자: jQuery가 정의되지 않았습니다.

powerit 2023. 7. 2. 21:04
반응형

전자: 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를 열고 Console 보기로 이동한 다음<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뿐만 아니라 모든 타사 라이브러리의 문제 해결
  • 스크립트 빌드 / 팩에 친숙함(예: 그룬트 / 모든 스크립트를 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 코드는 공용에서 실행 중인 것을 "인식"합니다.JS 환경 및 무시window.

솔루션은 jQuery를 로드하는 대신 매우 쉽습니다.<script src="...">다음과 같이 로드해야 합니다.

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

참고: 경로 앞의 점은 현재 디렉터리임을 나타내기 때문에 필요합니다.또한 jQuery에 종속된 다른 플러그인을 로드하기 전에 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/

jQuery/Require를 사용할 수 없는 경우JS/계량기/각도JS in Electron.

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내부 옵션을 선택할 수 있습니다.

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

멋지고 깨끗한 솔루션

  1. npm을 사용하여 jQuery를 설치합니다.(npm install jquery --save)
  2. 사용:<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

스크립트 로더를 설치한 후 부트 또는 응용 프로그램 파일에 추가합니다.

'script!path/your-file.js' 가져오기;

다음 명령을 사용하여 Jquery를 설치합니다.

npm install --save jquery

그 후 Jquery를 사용하고자 하는 js 파일에 bew line을 넣어주세요.

let $ = require('jquery')

좋아요, 여기 다른 방법이 있어요, 만약 당신이 친척을 포함하고 싶다면...

<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;
}

jquery 경로 바로 뒤에 있는 .vmx-cli.json:

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

전자를 사용하여 Angular App을 구축하고 있으며, 제 솔루션은 다음과 같습니다.

색인.

<script>
    if ( typeof module === "object" && typeof module.exports === "object" ) {
      window.$ = window.jQuery = require('jquery');
    }
</script>

각진.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 --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>

고려해야 할 사항:

을 이을바로전섹넣오으시십션에 바로 .</head>

Jquery. 파일 Jquery. 파일 Jquery.js 파일 min.js 또는 합니다.</body>꼬리표를 달다

이 문제에 대해서는 웹 페이지에서 사용하는 것과 동일하게 JQuery 및 기타 js를 사용합니다.그러나 Electron에는 노드 통합이 없으므로 Js 개체를 찾을 수 없습니다.은 야해합니다설을 설정해야 .module = undefined까지.js 파일이 저장됩니다. 하십시오.

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

것처럼 은 어진것가온후에져럼, ▁the▁like다▁after▁be니▁to▁▁able를 사용할 수 있을 것입니다.JQuery그리고 전자에 있는 다른 것들.

음 2022년에.이것은 저에게 효과가 있었습니다.

JQuery 설치

npm install jquery --save

을 합니다.script를 추가하려면 하십시오.index.html the 일파. 그src사용자의 ""에서 .node_modulesfolder 

    <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>

는 "JQuery"로 $(renderer process에서.renderer.js으)로 표시)

다음 코드를 사용해 보십시오.

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

실을 이용한 jquery 설치

yarn add jquery

언급URL : https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined

반응형

'programing' 카테고리의 다른 글

Oracle SQL 쿼리에서 선행 0을 추가하는 방법은 무엇입니까?  (0) 2023.07.02
mongodb 문서의 ID 유형으로 String을 사용할 수 있습니까?  (0) 2023.07.02
git-diff의 출력에서 공백 색상 지정  (0) 2023.07.02
MongoDB - 텍스트 필드의 인덱스와 텍스트 인덱스의 차이?  (0) 2023.07.02
두 표의 데이터를 하나의 보기로 변환  (0) 2023.07.02

'programing'의 다른글

  • 현재글전자: jQuery가 정의되지 않았습니다.

관련글

댓글

티스토리툴바