Toss electron support for jquery

recently in understanding electron framework writing applications, accidental discovery of using in HTML <script src= "./jquery.js" ></script> in this way the introduction of jquery, clearly introduced, the program is always error display:uncaught referenceerror: $is not defined.

After consulting the information, found not only jquery can not be used, Requirejs, Meteor, Angularjs also can not be used.

reason is The Electron introduces node. JS in the running environment, which is enabled by default with the node. JS require module, which in order to support the COMMONDJS standard, enables the way in which the module is introduced when require exists in the window. So there are some extra variables in the DOM, such as module, exports, and require. This results in many libraries not functioning properly because they also need to add variables with the same name to the running environment.

There are many solutions, and the official solution is 1, 2:

1. Disablenode. js: If you do not use node. js, it is resolved by disabling node. js in the main process.

//In the main process

var MainWindow = new Browserwindow ({

Webpreferences: {

Nodeintegration:false

}

});

2, variable rename: If you still need to use the API provided by node. JS and Electron, you need to rename those variables before you introduce those libraries.

<script>

//rename Electron provided by require

Window.noderequire = require;

Delete Window.require;

Delete Window.exports;

Delete Window.module;

</script>

<script type= "Text/javascript" src= "Jquery.js" ></script>

This way, you can use the node module with Noderequire, and you can use jquery, but this method is not suitable for Web projects and will not be able to be browsed properly on the web.

3, using node. js require introduced : (sometimes do not take the suffix name. js)

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

4. Custom $, jquery variable

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

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

6. Remove the module in the frame to introduce judgment code : for jquery

How to code in 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)}

Switch

!function (A, a) {B (a)}

I personally prefer to use a third type, simple code less

This article is from the "Road Cloud Nine" blog, please be sure to keep this source http://luyun9.blog.51cto.com/7592271/1979883

Toss electron support for jquery