How does Electron call the local module

Electron combines Chromium, Node.js, and APIs used to call operating system local features (such as opening file window, notifications, icons, etc., Electron development, as if developing a web page, and can be seamlessly used Or: It seems to build a node app and build an interface via HTML and CSS.

How do I call the Node API in the page?

I met some pits …

First, in the page load method, there are two ways to load the page in Electron:
One is to directly load the local file, the other is to request a page via the HTTP network.

 // Method 1 Local path Win.LoadURL (Url.Format ({pathname: path.join (__ DIRNAME, '/Dist/index.html'), Protocol: 'file:', Slashes: True });   
// Method 2 Network path Win.LoadURL (‘http: // localhost: 3000’);
  Now I want to reference a local NPM package in a JS file, which contains the Node API, so I can't use in the browser.  
Var local = window.NodeRequire (‘local’);

At this time, one problem occurs, using method 1 running normally, but use Method 2 Times is wrong, but if you use method 1, you need to pack it first each time you modify it, then use Electron to start, time consuming. Continue to find a solutionmethod.
CAN not Find Module XXX
   When using the network file, the parameters involved when the module._load function in Module.js is called 

The focus is on the following two variables, when the page is loaded from the HTTP, because the path is the network address, Electron sets the file name to init.js in the Electron installation directory.

FileName: “C: \ Users \ asus \ appdata \ roaming \ npm \ node_modules \ electron \ Dist \ resources \ electron.asar \ renderer \ init.js”

Paths: array [0]

And when using local index.html, PathName points to the correct path, and Paths also contains multiple Node_Modules paths, and Module will initialize the current path and the previous level, upstairs. Level 1 … until the Node_Modules of the root directory is used as the search path.

Electron 如何调用本地模块的方法

FILENAME: “E: \ WebStormWorkspace \ Electron_require \ index.html”

can be seen from the following module.js source code The file name is analyzed when the file name is analyzed. The path in this paths is used. Because of empty in Paths, the required modules are not found.


In fact, Electron is considered from a secure perspective. When loading a web page from an HTTP request, it is more dangerous if some modules can be called directly.

Module._resolveFilename = function (request, parent, isMain) {if (NativeModule.nonInternalExists (request)) {return request;} var resolvedModule = Module._resolveLookupPaths (request, parent); var id = resolvedModule [0]; var paths = Resolvedmodule [1]; // Look Up The FileName First, Since That’s The Cache Key. Debug (‘Looking For% J IN% J’, ID, Paths); var FileName = module._findpath (request, paths, ismain); If (! filename) {var err = new error (“cannot find module ‘” + Request + “”); err.code =’ module_not_found ‘; throw err;} return filename;};

Electron 如何调用本地模块的方法

At this time, I naturally think that the path to the module can be added to the paths, but this is actually incapable, electron contains the main process and rendering process, the main process is named this. JS file, this file is the entry of each electron app. It controls the life cycle of the application (from open to off). It can call native elements and create new (multiple) rendering processes, and the entire Node API is built-in.

Rendering Process is a browser window, now ourJS runs inside the rendering process, so we can’t modify the data of the rendering process directly in the main process.

Electron provides the IPC interface to communicate between the main process and the rendering process. He provides two ways of synchronization and asynchronous, and the synchronization method is directly set to Event.ReturnValue, asynchronous method uses Event.Sender.send (…).

// in main process.const {ipcmain} = Require (‘electrictron’) ipcmain.on (‘asynchronous-message “, (Event, Arg) ) => {Console.log (arg) // Prints “ping” Event.sender.send (‘asynchronous-reply’, ‘pong’)}) ipcmain.on (‘synchronous-message “, (Event, arg) = > {Console.log (arg) // Prints “ping” Event.ReturnValue = ‘pong’}

   
// IN renderer process (web page) .const {ipcRenderer} = require ( ‘electron’) console.log (ipcRenderer.sendSync ( ‘synchronous-message’, ‘ping’)) // prints “pong” ipcRenderer.on ( ‘asynchronous- Reply ‘, (Event, arg) => {console.log (arg) //prints “pong”}) iPcRenderer.send (‘Asynchronous-Message’, ‘ping’)

, there is actually a simpler method, using the Remote module to directly call:

const remote = window.NodeRequire (‘electron’). Remote; var local = remote.require (‘local’);
   
This will use the external module directly, why can this be referenced by the Electron module, while others can’t?
Continue to see the source code, electron rewrites the module._resolvefilename function, and then return the path directly when Require (‘electron’), so you can find it.
// Patch Module._ResolveFileName To Always Require The Electron Api when // Require (‘Electron’) is done.const electronpath = path.join (__ DIRNAME, ‘. . ‘, process.type,’ api ‘,’ exports’, ‘electron.js’) const originalResolveFilename = Module._resolveFilenameModule._resolveFilename = function (request, parent, isMain) {if (request ===’ electron ‘) { Return Electronpath}Else {Return ORIGINALRESOLVEFILENAME (Request, Parent, ISmain)}}}. Call (this, exports, need, module, __filename, __dirname);});
   
The above is All the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment