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