我想用 ES6 导入语法构建一个 Electron 应用程序,这样我就可以在我的 Node.js 和浏览器端 JS 之间重用模块,而无需重复代码,并且发现 Electron 在 ES6 语法支持上落后于时代令人沮丧。
我了解到this magical solution才发现它不再被维护。
所以巴别塔来救援,至少我是这么想的。 Google 在 Babel + Electron 教程的主题上并不完全富有成果。我还想加入 Nodemon。
这是我的设置:
包.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"
}
}
正如您将在以下输出和调试日志中看到的那样,这里的问题是我们正在尝试编译 Node 模块以使用 ES6 语法,但是任何 Electron 应用程序都依赖于 Electron 模块,该模块似乎无法导出一种传统的方式,解析 Electron 可执行路径(字符串)而不是 Node.js 模块。这是一个循环问题。app.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)
输出: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'
}
}
我意识到这可能是因为“Electron ”。在解析管道中做了一些特别的事情。但我肯定听说过 Babel 是在 Electron 中使用 ES6 导入语法的解决方案,我只是找不到关于这样做的实际指南。那么如何将 Babel 与 Electron 一起使用?
最佳答案
我认为问题在于您对 babel-node
的使用. babel-node
是 node
在执行 JS 代码之前执行 babel 转换的 cli 克隆。它不是编译器。没有--out-file
为此 cli 定义的标志。遗憾的是,它没有警告您使用无法识别的标志。
为了编译你的 ES6 文件,你需要使用 babel
cli。更换babel-node
与 babel
在您的compile
任务应该可以解决问题。
您还需要将导入替换为 import * as ... from ...
句法:
import * as url from 'url'
import * as path from 'path'
您还可以查看 Electron 12 预览。它们支持支持 ES 模块的 Node 14。所以当 Electron 12 出来时,理论上应该可以在没有 Babel 的情况下使用 ES 模块。
关于javascript - 如何将 Babel 与 Electron 一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65380783/