Electron打包后ES6语法不支持问题求助

我之前也遇到过完全一样的问题——开发时用electron-prebuilt-compile跑起来顺得不行，打包就报Unexpected token import，本质是因为electron-prebuilt-compile只在开发阶段帮你做了实时转译，而electron-packager默认不会处理你的源码转译工作。下面是我亲测有效的解决步骤：

1. 调整依赖，替换开发阶段的特殊包 #

首先把electron-prebuilt-compile从devDependencies里移除，换成标准的electron包：

npm uninstall electron-prebuilt-compile --save-dev
npm install electron --save-dev

2. 配置Babel转译ES6/JSX #

Electron的Node.js环境对ES模块语法（比如import/export）支持有限，加上JSX本身需要转译，所以得用Babel来做代码转换：

• 安装必要的Babel依赖：

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

• 在项目根目录创建.babelrc文件，配置转译规则：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "electron": "你的Electron版本号，比如25.0.0"
      }
    }],
    "@babel/preset-react"
  ]
}

3. 用Webpack打包主进程和渲染进程代码 #

接下来需要把源码转译并打包成Electron能直接运行的代码，这里用Webpack举例：

• 安装Webpack相关依赖：

npm install webpack webpack-cli --save-dev

• 创建webpack.main.config.js（主进程配置）：

const path = require('path');

module.exports = {
  entry: './src/main.js', // 你的主进程入口文件路径
  target: 'electron-main',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

• 创建webpack.renderer.config.js（渲染进程配置）：

const path = require('path');

module.exports = {
  entry: './src/renderer.js', // 你的渲染进程入口文件路径
  target: 'electron-renderer',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'renderer.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

• 在package.json里添加打包脚本：

"scripts": {
  "build:main": "webpack --config webpack.main.config.js",
  "build:renderer": "webpack --config webpack.renderer.config.js",
  "build": "npm run build:main && npm run build:renderer",
  "pack": "npm run build && electron-packager ./dist 你的应用名称 --platform=darwin,win32 --arch=x64"
}

注意：electron-packager的入口要指向Webpack打包后的dist目录，而非原来的源码目录。

4. 验证打包流程 #

先运行npm run build确认转译打包没有报错，再执行npm run pack生成分发文件，这时候运行打包后的应用应该就不会再出现ES6语法错误了。

额外提示 #

如果你觉得Webpack配置太繁琐，也可以换成electron-builder——它内置了对ES6/JSX的支持，配置起来更简单，只需要在package.json里添加几个字段就能完成打包。不过如果你坚持用electron-packager，上面的步骤完全够用。

内容的提问来源于stack exchange，提问作者Yair Nevet