อิเล็กตรอน: jQuery ไม่ได้ถูกกำหนดไว้

315

ปัญหา: ขณะพัฒนาโดยใช้อิเล็กตรอนเมื่อคุณพยายามใช้ปลั๊กอิน JS ใด ๆ ที่ต้องการ jQuery ปลั๊กอินจะไม่พบ 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สิ่งนั้นหรือบางสิ่งที่มีผลกระทบนั้น

jquery electron

— บรูโน่วาซ
แหล่งที่มา

ทำไมไม่เพียงแค่ใช้requireฟังก์ชั่นอิเล็กตรอน?

760

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) โดยไม่ต้องระบุแต่ละรายการ
สคริปต์ Build / Pack Friendly (เช่น Grunt / Gulp สคริปต์ทั้งหมดลงใน supplier.js)
ไม่จำเป็นต้องnode-integrationเป็นเท็จ

แหล่งที่มาที่นี่

— Dale Harders
แหล่งที่มา

1

@fareednamrouti ใช่ แต่ประเด็นของการแก้ปัญหานี้ก็คือคุณไม่จำเป็นต้องใส่รายชื่อไลบรารีของบุคคลที่สาม (ใช้งานได้!) มีประโยชน์เมื่อคุณนำเข้าหลาย ๆ ไลบรารี (หรือสคริปต์ที่รวมตัวเอง)

— Dale Harders

2

ขอบคุณ! ในกรณีของฉันโซลูชันนี้ใช้ได้กับ d3 รุ่นเก่าเช่น d3 v3 หรือต่ำกว่า

— headwinds

2

@DaleHarders ปรากฎว่าwindow.moduleเริ่มต้นด้วยค่าเดียวกันmoduleดังนั้นรหัสของคุณจึงไม่ทำงานอย่างที่คาดไว้ วิธีการที่เหมาะสมที่จะทำคือการบันทึกmoduleอื่น ๆ (ไม่ได้ใช้) window.tempModuleคุณสมบัติของหน้าต่างแทนบางส่วนเช่น เพื่อยืนยันสิ่งที่ผมพูดลองหลังจากคำสั่งสุดท้ายของคุณเพื่อตรวจสอบว่าในขณะนี้console.log(module) module === undefined

— Lucio Paiva

1

@Lucio Nope เราจำเป็นต้องบันทึกลงใน window.module เนื่องจากนี่เป็นที่ที่ห้องสมุดบุคคลที่สามคาดหวังไว้ (สภาพแวดล้อมของเบราว์เซอร์) ฉันคิดว่าคุณสับสน Node.js และสภาพแวดล้อมของเบราว์เซอร์ เคล็ดลับนี้จะช่วยในการพัฒนาเพื่อให้โค้ดของคุณสามารถทำงานในเบราว์เซอร์และโหนด / อิเล็กตรอนโดยไม่มีการกำหนดค่าเพิ่มเติมใด ๆ มีหลายวิธีที่จะทำ แต่นี่เป็น IMHO ที่ง่ายที่สุด

— Dale Harders

1

นี่เป็นปัญหากับ CSP - ไม่มีสคริปต์แบบอินไลน์

— Trevor

121

ดังที่เห็นใน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 ก่อนที่จะโหลดปลั๊กอินอื่น ๆ ที่ขึ้นอยู่กับมัน

— บรูโน่วาซ
แหล่งที่มา

1

ขอบคุณ แต่ฉันมีระบบที่สร้างขึ้นโดย Yeoman ที่มีมุม Grunt นำการพึ่งพาในใจของฉันทั้งหมดและสร้างมันให้เป็นไฟล์ vendor.js ฉันจะโหลด jquery แก้ไขด้วยบรรทัดของคุณและดำเนินการต่อด้วยการพึ่งพา bower อื่นที่ต้องการ jquery

— bluesky777

ฉันไม่เข้าใจผู้ขาย js มี jquery ภายใน? ถ้าเป็นเช่นนั้นคุณสามารถโหลด Vend.js ด้วยหน้าต่างนี้ $ method, afaik

— Bruno Vaz

ความคิดเห็นบางส่วนต่อไปในประเด็นที่เชื่อมโยงจะมีทางออกที่ดีกว่าแม้: เป็นตัวเลือกสำหรับ'node-integration': false BrowserWindow

— Boldewyn

6

สิ่งนี้ไม่ส่งผลกระทบต่อสิ่งอื่นหรือ

— Bruno Vaz

53

อีกวิธีในการเขียน<script>window.$ = window.jQuery = require('./path/to/jquery');</script>คือ:

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

— Aaleks
แหล่งที่มา

ฉันพบว่านี่เป็นคำตอบที่ดีที่สุดเพราะฉันยังสามารถใช้ CDN กับมันได้! และไม่จำเป็นต้องเขียนทับอะไรเลย

— patotoma

53

อิเล็กตรอนคำถามที่พบบ่อยคำตอบ:

http://electron.atom.io/docs/faq/

ฉันไม่สามารถใช้ 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>

— Fran6
แหล่งที่มา

@ Fran6 ฉันต้องทำอย่างไรหากฉันโหลดหน้าเว็บภายนอก :(

— georgiosd

สิ่งนี้ใช้ได้ แต่หลังจากทำแอพอิเล็กตรอนของฉันจะไม่ปิด - นั่นคือฉันไม่สามารถออกจากหน้าเว็บได้

— tale852150

34

เพิ่งเจอปัญหาเดียวกันนี้

npm install jquery --save

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

ทำงานให้ฉัน

— Dhaval Chauhan
แหล่งที่มา

นี่คือสิ่งที่คำตอบเดิมของฉันพูด

— Bruno Vaz

สวัสดีวิธีการที่จะทำเช่นเดียวกันกับ materialize.min.js cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/... .. บางอย่างเช่นนี้ <script> window.Materialize = window.Materialize = require ('Materialize'); </script> ??? ใครบางคนสามารถช่วยได้

— Makjb lh

@BrunoVaz คำตอบนี้สะอาดมากขึ้น :)

— 384

20

คุณสามารถใส่node-integration: falseตัวเลือกภายใน BrowserWindow

เช่น: window = new BrowserWindow({'node-integration': false});

— Murilo Feres
แหล่งที่มา

4

นี่เป็นโซลูชันที่ดีสำหรับผู้ใช้ที่ไม่ต้องการรวมโหนด

— Adam Szmyd

มันยอดเยี่ยมมากเหมาะสำหรับฉัน ขอบคุณ @Murilo Feres มีตัวเลือกการรวมโหนดใดบ้าง

— Ahesanali Suthar

3

ไม่ทำงาน @ 1.4 โปรดใช้: ให้ win = new BrowserWindow ({webPreferences: {nodeIntegration: false}})

— holly

14

ทางออกที่ดีและสะอาด

ติดตั้ง jQuery โดยใช้ npm ( npm install jquery --save)
ใช้มัน: <script> let $ = require("jquery") </script>

— adgelbfish
แหล่งที่มา

8

ฉันประสบปัญหาเดียวกันและสิ่งนี้ใช้ได้สำหรับฉัน!

ติดตั้งjQueryโดยใช้npm

$ npm install jquery

จากนั้นให้รวม jQuery ด้วยวิธีใดวิธีหนึ่งต่อไปนี้

ใช้แท็กสคริปต์

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

ใช้ Babel

import $ from 'jquery';

ใช้ Webpack

const $ = require('jquery');

— Abraham Hernandez
แหล่งที่มา

6

<script>
  delete window.module;
</script>

ก่อนที่คุณจะนำเข้า jquery และคุณก็พร้อมที่จะไป ข้อมูลเพิ่มเติมได้ที่นี่

— Sagiv Ofek
แหล่งที่มา

5

ฉันคิดว่าฉันเข้าใจการต่อสู้ของคุณฉันแก้ไขมันเล็กน้อยแตกต่างกันฉันใช้ตัวโหลดสคริปต์สำหรับไฟล์ js ของฉันซึ่งรวมถึงตัวโหลด jquery.Script ใช้ไฟล์ js ของคุณและแนบไปด้านบนของไฟล์ supplier.js ของคุณซึ่งมันวิเศษสำหรับฉัน

https://www.npmjs.com/package/script-loader

หลังจากติดตั้งตัวโหลดสคริปต์ให้เพิ่มสิ่งนี้ลงในไฟล์บูตหรือแอปพลิเคชันของคุณ

นำเข้า 'script! path / your-file.js';

— Mertcan Diken
แหล่งที่มา

4

ตกลงนี่เป็นอีกตัวเลือกถ้าคุณต้องการรวมญาติ ...

<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>

— aestrro
แหล่งที่มา

3

หากคุณใช้ Angular2 คุณสามารถสร้างไฟล์ js ใหม่ด้วยรหัสนี้:

// jquery-electron.js

if ((!window.jQuery || !window.$) && (!!module && !!module.exports)) {
      window.jQuery = window.$ = module.exports;
}

และวางไว้หลังจากเส้นทาง jquery ใน .angular-cli.json:

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

— แม็กซ์
แหล่งที่มา

3

ฉันกำลังสร้างและแอพเชิงมุมด้วยอิเล็กตรอนวิธีแก้ปัญหาของฉันคือ:

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 หากอยู่บนเบราว์เซอร์ถ้าเป็นแอปที่สร้างอิเล็กตรอนจะต้องใช้โมดูลแทน

หากคุณต้องการนำเข้า jquery ใน index.html แทนที่จะนำเข้าจาก angular.json ใช้วิธีแก้ปัญหาต่อไปนี้:

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

— Kuza Grave
แหล่งที่มา

2

ทำงานให้ฉันโดยใช้รหัสต่อไปนี้

var $ = require('jquery')

— Adeojo Emmanuel IMM
แหล่งที่มา

2

1. ติดตั้ง jQuery โดยใช้ npm

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>

— Alexey Kolotsey
แหล่งที่มา

2

มันใช้งานได้สำหรับฉัน

<script languange="JavaScript">
     if (typeof module === 'object') {window.module = module; module = undefined;}
</script>

สิ่งที่ต้องพิจารณา:

1) ใส่สิ่งนี้ไว้ในหัวข้อก่อนหน้า </head>

2) รวม Jquery.min.js หรือ Jquery.js ไว้ข้างหน้า</body>แท็ก

— Vishal Goyal
แหล่งที่มา

0

คุณอาจลองรหัสต่อไปนี้:

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

— shuoGG
แหล่งที่มา

0

สำหรับปัญหานี้ใช้ JQuery และ js อื่น ๆ เช่นเดียวกับที่คุณใช้ในเว็บเพจ อย่างไรก็ตามอิเล็กตรอนมีการรวมโหนดดังนั้นมันจะไม่พบวัตถุ 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>

หลังจากนำเข้าอย่างที่กำหนดคุณจะสามารถใช้JQueryสิ่งต่าง ๆ ในอิเล็กตรอนได้

— กีรานมณียา
แหล่งที่มา

0

เพียงติดตั้ง Jquery ด้วยคำสั่งดังต่อไปนี้

npm install --save jquery

หลังจากนั้นกรุณาใส่สาย belew ในไฟล์ js ที่คุณต้องการใช้ Jquery

let $ = require('jquery')

— มิลาน Hirpara
แหล่งที่มา