如何将 Babel 与 Electron 结合使用？

Question

我想使用 ES6 导入语法构建一个 Electron 应用程序，这样我就可以在 Node.js 和浏览器端 JS 之间重用模块，而无需重复代码，但令人沮丧的是，我发现 Electron 在 ES6 语法支持方面落后于时代。

我了解了这个神奇的解决方案，却发现它不再被维护。

所以 Babel 来救援了，至少我是这么认为的。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"
  }
}

正如您将在以下输出和调试日志中看到的那样，这里的问题是我们正在尝试编译节点模块以使用 ES6 语法，但任何 Electron 应用程序都依赖于 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)

输出：

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 结合使用呢？

Answer 1

我认为问题在于你对 的使用babel-node。babel-node是一个nodecli 克隆，它在执行 JS 代码之前进行 babel 转换。它不是编译器。没有--out-file为此 cli 定义标志。遗憾的是它不会警告您使用无法识别的标志。

为了编译 ES6 文件，您需要使用babelcli。在你的任务中替换babel-node为应该可以解决问题。babelcompile

您还需要将导入替换为import * as ... from ...语法：

import * as url from 'url'
import * as path from 'path'

您还可以查看 Electron 12 预览。它们支持 Node 14，后者支持 ES 模块。因此，当 Electron 12 发布时，理论上应该可以在没有 Babel 的情况下使用 ES 模块。