Electron對JQuery的支持問題


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

經查閱資料,發現不僅JQuery不能用,RequireJS、Meteor、AngularJS也不能使用。

        原因是Electron 在運行環境中引入了 Node.js,默認啟用了Node.js的require模塊,而這些框架為了支持commondJS標准,當Window中存在require時,會啟用模塊引入的方式。所以在 DOM 中有一些額外的變量,比如module、exports和require。這導致了許多庫不能正常運行,因為它們也需要將同名的變量加入運行環境中。

解決方法有很多,官方的解決方法是1、2:

        1、禁用Node.js:若不使用Node.js則通過在主進程中禁用Node.js來解決。

        // 在主進程中

        var mainWindow = new BrowserWindow({

            webPreferences: {

                nodeIntegration: false

            }

        });

        2、變量重命名:假如依然需要使用 Node.js 和 Electron 提供的 API,則需要在引入那些庫之前將這些變量重命名。

        <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里將無法正常瀏覽。

        3、采用Node.js的require引入:(有些時候不要帶后綴名.js)

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

        4、自定義$、jQuery變量

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

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

        5、

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

        6、去掉框架中的模塊引入判斷代碼:針對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)}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM