electron引入html模版,Electron中Jquery的引入方式

Electron默認啟用了Node.js的require模塊，而jQuery等新版本框架為了支持commondJS標准，當Window中存在require時，會啟用模塊引入的方式，導致報錯 Uncaught ReferenceError: $ is not defined，本文研究了高低版本jQuery引入的正確方式。

1. 報錯原因

Electron默認啟用了Node.js的require模塊，而jQuery等新版本框架為了支持commondJS標准，當Window中存在require時，會啟用模塊引入的方式.

2. 幾種引入方式

方式1，html頁面直接引入：

經測試jquery-1.9.1可以,jquery-1.11.1按這種方式報錯

方式2，html頁面引入時：

經測試jquery-1.11.0可以,jquery-1.9.1按這種方式報錯

方式3，html頁面引入時重命名並刪除對象

window.nodeRequire = require;

delete window.require;

delete window.exports;

delete window.module;

經測試jquery-1.9.1可以,jquery-1.11.1按這種方式報錯

方式4,去掉框架中的模塊引入判斷代碼，將jQuery中的第一行代碼中的

!function(a,b){"object"==typeof module&&"object"==typeof module.exports? module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}

改為

!function(a,b){b(a)}

html頁面引用時

jquery-1.11.0成功,而jquery-1.9.1中第一行沒有這個代碼，故不能采用這種方式

方式5，如果開發了一定的量，而且不想使用Node.js模塊，大可以去掉require模塊化引入，直接使用以下方法禁用Node.js的require模塊化引入，即可正常使用任何框架

// In the main process.

let win = new BrowserWindow({

webPreferences: {

nodeIntegration: false

}

});

總結

低版本JQuery建議方式1，高版本JQuery建議方式2；不使用Node.js模塊的話可以嘗試方式5

參考資料