Javascript 我如何使用电子巴别塔？

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

我学会了，却发现它已经不复存在了

所以巴贝尔去营救了，或者我是这么想的。谷歌在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"
  }
}

正如您将在以下输出和调试日志中看到的，这里的问题是我们试图编译节点模块以使用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)

输出：

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

日志：

---

我意识到这可能是因为“电子”在解析管道中做了一些特殊的事情。但我确实听说过Babel是在Electron中使用ES6导入语法的解决方案，我只是找不到一个实际的指南。那么，我如何将巴贝尔与电子结合使用呢？

我认为问题在于您如何使用

巴贝尔节点
babel节点
是一个
节点
cli克隆，在执行JS代码之前执行babel转换。它不是一个编译器。没有为此cli定义
--out file
标志。遗憾的是，它没有警告您使用无法识别的标志

为了编译ES6文件，您需要使用
babel
cli。在
compile
任务中将
babel节点
替换为
babel

您还需要将导入替换为
import*as。。。从…
语法：

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

您还可以查看Electron 12预览。它们支持支持支持ES模块的节点14。因此，当Electron 12退出时，理论上应该可以使用没有Babel的ES模块。
IIRC I在电子锻造崩溃后切换到Electron react样板。我在上面放了一堆东西，但它解决了眼前的问题——它可能不是你想要的，但这确实是一个很好的起点。@DaveNewton感谢您的知识，但如果我必须在项目中使用名为electron react样板的模块，而不使用react，而只是使用ES6导入语法，我可能只需要在汇编中编写应用程序。我将经历同样的时间/麻烦，并为自己保留一些尊严。@J.Todd有趣，但不真实：）正如我所说，我的观点是，这是理解设置的一个良好起点，因为它使用ES6。也许只是把React相关的东西拿出来。Webpack在使用javascript或typescript的电子项目上对我很有用。也许值得一看。
{
  name: {
    default: 'C:\\Users\\jonat\\documents\\github\\infinitum\\node_modules\\electron\\dist\\electron.exe'
  }
}

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