欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Electron 如何調(diào)用本地模塊的方法

 更新時間:2019年02月01日 11:25:20   作者:_亦影  
這篇文章主要介紹了Electron 如何調(diào)用本地模塊的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

Electron 結合了 Chromium、Node.js 和用于調(diào)用操作系統(tǒng)本地功能的 API(如打開文件窗口、通知、圖標等,基于 Electron 的開發(fā),就好像開發(fā)一個網(wǎng)頁一樣,而且能夠無縫地使用 Node?;蛘哒f:就好像構建一個 Node app,并通過 HTML 和 CSS 構建界面。

那么如何在頁面中調(diào)用 Node API 呢?

碰到了一些坑…

先從頁面加載方式說起,Electron 中加載頁面的方式有兩種:
一種是直接加載本地文件,另一種是通過 http 網(wǎng)絡請求頁面。

//方法1 本地路徑
win.loadURL(url.format({
  pathname: path.join(__dirname, '/dist/index.html'),
  protocol: 'file:',
  slashes: true
}));
//方法2 網(wǎng)絡路徑
win.loadURL('http://localhost:3000');

現(xiàn)在我想要在某個js文件中引用一個本地的 npm 包,其中包含 Node API,所以在瀏覽器中無法使用。

var local = window.nodeRequire('local');

此時出現(xiàn)一個問題,使用方法1運行正常,但使用方法2時報錯,但是如果使用方法1,每次修改完代碼都需要先打包一遍,再使用 Electron 啟動,耗時耗力啊。繼續(xù)尋找解決方法。

can not find module xxx

調(diào)試發(fā)現(xiàn)在使用網(wǎng)絡文件時,在調(diào)用 module.js 中的 Module._load 函數(shù)時參入的參數(shù) parent 為

重點在下面兩個變量,從 Http 加載頁面時,由于路徑是網(wǎng)絡地址,所以 Electron 將文件名設置為 Electron 安裝目錄下的 init.js.

filename: "C:\Users\asus\AppData\Roaming\npm\node_modules\electron\dist\resources\electron.asar\renderer\init.js"
paths: Array[0]

而在使用本地 index.html 時,pathname 指向正確的路徑,而且 paths 中也包含了多個 node_modules 路徑,module在初始化時會將當前路徑以及上一級、上上一級…直到根目錄的 node_modules 作為搜索路徑。

filename: "E:\WebStormWorkspace\electron_require\index.html"

從下面 module.js 源碼可以看到,文件名解析的時候正式利用了這個 paths 中的路徑。因為 paths 中的空的,所以找不到所需要的模塊。

其實 Electron 是從安全的角度考慮,在從 Http 請求中加載網(wǎng)頁時,如果能直接調(diào)用本地的一些模塊,會比較危險。

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

此時很自然地想到可以把所需要模塊的路徑加入到 paths 中去,但這其實是不可行的,Electron 包含主進程和渲染進程,主進程就是這里命名main.js 的文件,該文件是每個 Electron 應用的入口。它控制了應用的生命周期(從打開到關閉)。它能調(diào)用原生元素和創(chuàng)建新的(多個)渲染進程,而且整個 Node API 是內(nèi)置其中的。

渲染進程就是一個瀏覽器窗口,現(xiàn)在我們的 js 跑在渲染進程里面,所以我們并不能直接在主進程里面修改渲染進程的數(shù)據(jù)。

Electron 提供了 IPC 接口專門用于主進程和渲染進程之間的通信,他提供了同步和異步兩種方法,同步方法直接設置 event.returnValue,異步方法使用 event.sender.send(…).

// In main process.
const {ipcMain} = require('electron')
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')

但其實有更簡單的方法,使用 remote 模塊來直接調(diào)用:

const remote = window.nodeRequire('electron').remote;
var local = remote.require('local');

這樣子就可以直接使用外部模塊了,這里為什么能引用 electron 模塊,而其他的不可以呢?

繼續(xù)看源碼, Electron 重寫了 Module._resolveFilename 函數(shù),在 require(‘electron') 時,就直接返回路徑,所以就可以找到啦。

// 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._resolveFilename
Module._resolveFilename = function (request, parent, isMain) {
 if (request === 'electron') {
  return electronPath
 } else {
  return originalResolveFilename(request, parent, isMain)
 }
}

}.call(this, exports, require, module, __filename, __dirname); });

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • vue組件傳值的實現(xiàn)方式小結【三種方式】

    vue組件傳值的實現(xiàn)方式小結【三種方式】

    這篇文章主要介紹了vue組件傳值的實現(xiàn)方式,結合實例形式總結分析了vue.js組建傳值的三種實現(xiàn)方式,包括父傳子、子傳父及非父子傳值,需要的朋友可以參考下
    2020-02-02
  • vue項目中更改名字和圖標的簡單實現(xiàn)步驟

    vue項目中更改名字和圖標的簡單實現(xiàn)步驟

    今天在寫vue項目時碰到的問題是怎么修改vue的網(wǎng)頁圖標,所以下面這篇文章主要給大家介紹了關于vue項目中更改名字和圖標的簡單實現(xiàn),文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2022-08-08
  • vue使用vue-json-viewer展示JSON數(shù)據(jù)的詳細步驟

    vue使用vue-json-viewer展示JSON數(shù)據(jù)的詳細步驟

    最近在開發(fā)一個公司的投放管理系統(tǒng)的操作日志模塊,要查看某條操作日志的請求參數(shù),要將請求的參數(shù)以JSON格式的形式展示出來,下面這篇文章主要給大家介紹了vue使用vue-json-viewer展示JSON數(shù)據(jù)的相關資料,需要的朋友可以參考下
    2022-09-09
  • 詳解Vue依賴收集引發(fā)的問題

    詳解Vue依賴收集引發(fā)的問題

    這篇文章主要介紹了Vue依賴收集引發(fā)的問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • 一文詳解websocket在vue2中的封裝使用

    一文詳解websocket在vue2中的封裝使用

    這篇文章主要為大家介紹了一文詳解websocket在vue2中的封裝使用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03
  • Vue路由應用詳細講解

    Vue路由應用詳細講解

    路由的本質就是一種對應關系,根據(jù)不同的URL請求,返回對應不同的資源。那么url地址和真實的資源之間就有一種對應的關系,就是路由
    2022-11-11
  • vue-cli 3.0 引入mint-ui報錯問題及解決

    vue-cli 3.0 引入mint-ui報錯問題及解決

    這篇文章主要介紹了vue-cli 3.0 引入mint-ui報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • VUE使用day.js顯示時分秒并實時更新時間效果實例

    VUE使用day.js顯示時分秒并實時更新時間效果實例

    vue.js是目前比較流行的前端框架之一,它提供了非常多的基礎組件和工具庫,以方便開發(fā)者快速搭建具有可重用性的web應用,下面這篇文章主要給大家介紹了關于VUE使用day.js顯示時分秒并實時更新時間效果的相關資料,需要的朋友可以參考下
    2024-04-04
  • 如何用electron把vue項目打包為桌面應用exe文件

    如何用electron把vue項目打包為桌面應用exe文件

    這篇文章主要介紹了如何用electron把vue項目打包為桌面應用exe文件,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • vue-cli axios請求方式及跨域處理問題

    vue-cli axios請求方式及跨域處理問題

    這篇文章主要介紹了vue-cli axios請求方式及跨域處理問題,文中還給大家提到了vue中axios解決跨域問題和攔截器使用,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2018-03-03

最新評論