Electron對JQuery的支持問題

時間 2019-11-11

原文原文鏈接

最近在瞭解Electron框架寫應用，偶然發如今html中使用<script src="./jquery.js"></script>這種方式引入JQuery，明明引入了，程序中卻始終報錯顯示：Uncaught ReferenceError: $ is not defined。javascript

經查閱資料，發現不只JQuery不能用，RequireJS、Meteor、AngularJS也不能使用。html

緣由是Electron 在運行環境中引入了 Node.js，默認啓用了Node.js的require模塊，而這些框架爲了支持commondJS標準，當Window中存在require時，會啓用模塊引入的方式。因此在 DOM 中有一些額外的變量，好比module、exports和require。這致使了許多庫不能正常運行，由於它們也須要將同名的變量加入運行環境中。java

解決方法有不少，官方的解決方法是一、2：node

一、禁用Node.js：若不使用Node.js則經過在主進程中禁用Node.js來解決。jquery

        // 在主進程中

        var mainWindow = new BrowserWindow({

            webPreferences: {

                nodeIntegration: false

            }

        });

二、變量重命名：假如依然須要使用 Node.js 和 Electron 提供的 API，則須要在引入那些庫以前將這些變量重命名。web

        <head>

            <script>

                // 重命名 Electron 提供的 require

                window.nodeRequire = require;

                delete window.require;

                delete window.exports;

                delete window.module;

            </script>

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

        </head>

這樣，就能夠用nodeRequire來使用node模塊，又能使用jQUery了，但這種方法不適合web項目，在web裏將沒法正常瀏覽。框架

三、採用Node.js的require引入：（有些時候不要帶後綴名.js）測試

       <script>window.$ = window.jQuery = require("./js/jquery.min");</script>

四、自定義$、jQuery變量ui

        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

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

五、this

<!-- Insert this line above script imports置於引入jQuery以前--> 

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

<!-- normal script imports etc 引入JQuery--> 

<script src="scripts/jquery.min.js"></script> 

 <!-- Insert this line after script imports置於引入jQuery以後（本人測試能夠不加下面這句） --> 

<script>if (window.module) module = window.module;</script>

六、去掉框架中的模塊引入判斷代碼：針對JQuery

將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)}

相關標籤/搜索

electron+avalon+jquery+codemirror

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。