![](/img/trans.png)
[英]Why is the installation of Babel failing in Electron? And do I need Babel or not?
[英]How do I use Babel with Electron?
我想用 ES6 導入語法構建一個 Electron 應用程序,這樣我就可以在我的 Node.js 和瀏覽器端 JS 之間重復使用模塊,而無需重復代碼,並發現 Electron 在語法上令人沮喪。
我了解了這個神奇的解決方案,卻發現它不再被維護。
所以巴別塔來救援,至少我是這么想的。 Google 在 Babel + Electron 教程的主題上並不完全富有成果。 我還想加入 Nodemon。
這是我的設置:
package.json
{
"name": "infinitum",
"version": "1.0.0",
"description": "",
"main": "compiled.js",
"directories": {
"test": "tests"
},
"scripts": {
"start": " electron .",
"compile": "nodemon --exec babel-node app.js --out-file compiled.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/node": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"electron": "^11.1.0",
"nodemon": "^2.0.6"
}
}
正如您將在以下 output 和調試日志中看到的那樣,這里的問題是我們正在嘗試編譯節點模塊以使用 ES6 語法,但是任何 Electron 應用程序都依賴於導出模塊中的 Z0DF2DA9CF88450E6758Z56DA4 中的 Z0DF2DA9CF88450E6758356DA5一種傳統的方法,解析 electron 可執行路徑(字符串)而不是 Node.js 模塊。 這是一個循環問題。
應用程序.js
import {app, BrowserWindow} from 'electron'
import 'url'
import 'path'
let win
function createWindow() {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format ({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
app.on('ready', createWindow)
.babelrc
{
"presets": [
"@babel/preset-env"
]
}
我在跑:
npm run compile
這給出了錯誤:
C:\Users\jonat\documents\github\infinitum\app.js:23
_electron.app.on('ready', createWindow);
^
TypeError: Cannot read property 'on' of undefined
at Object.<anonymous> (C:\Users\jonat\documents\github\infinitum\/app.js:16:5)
at Module._compile (internal/modules/cjs/loader.js:1076:30)
at Module._compile (C:\Users\jonat\Documents\GitHub\infinitum\node_modules\pirates\lib\index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Object.newLoader [as .js] (C:\Users\jonat\Documents\GitHub\infinitum\node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:941:32)
at Function.Module._load (internal/modules/cjs/loader.js:782:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at Object.<anonymous> (C:\Users\jonat\Documents\GitHub\infinitum\node_modules\@babel\node\lib\_babel-node.js:172:21)
at Module._compile (internal/modules/cjs/loader.js:1076:30)
所以調試我嘗試了這個app.js
:
import electron from 'electron'
console.log("typeof electron:", typeof electron, "\nelectron:", electron)
Output:
typeof electron: string
electron: C:\Users\jonat\documents\github\infinitum\node_modules\electron\dist\electron.exe
作為進一步的澄清,一個 app.js 像這樣:
import * as name from 'electron'
console.log({ name })
日志:
{
name: {
default: 'C:\\Users\\jonat\\documents\\github\\infinitum\\node_modules\\electron\\dist\\electron.exe'
}
}
我意識到這可能是因為“電子”。 在解析管道中做了一些特別的事情。 但我絕對聽說過 Babel 是在 Electron 中使用 ES6 導入語法的解決方案,我只是找不到實際的指南。 那么如何將 Babel 與 Electron 一起使用?
我認為問題在於您對babel-node
的使用。 babel-node
是一個node
cli 克隆,它在執行 JS 代碼之前進行 babel 轉換。 它不是編譯器。 沒有為此 cli 定義--out-file
標志。 遺憾的是,它沒有警告您使用無法識別的標志。
為了編譯你的 ES6 文件,你需要使用babel
cli。 在您的compile
任務中用babel
替換babel-node
應該可以解決問題。
您還需要替換導入以import * as... from...
語法:
import * as url from 'url'
import * as path from 'path'
您還可以查看 Electron 12 預覽。 它們支持支持 ES 模塊的 Node 14。 所以當 Electron 12 出時,理論上應該可以不用 Babel 使用 ES 模塊。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.