使用 Ionic2、serialport 和 electron-builder 构建 Electron

Question

我不确定哪个平台/工具是我问题的根源，所以在 SO 上问这个问题而不是 Git-Hub 存储库之一的问题。我正在尝试开发一个基于 Polyonic. Polyonic itself is a kind of seed mashup of Electron and Ionic2. My project also uses node-serialport 的项目，它是一个原生模块。

我的开发版本是： - 节点 7.4.0 - 电子 1.6.10

... 和运行ning ionic info 在我项目的 src 文件夹中给出：

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1 
    Gulp CLI         : CLI version 3.9.1 Local version 3.9.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-gulp          : 1.0.1
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : browser 4.1.0
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v7.4.0
    OS         : Linux 4.6
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 4.0.5

如果我在 src 目录中做 npm install，然后在根目录中做 npm install，根目录中的 npm start（其中运行是 gulp 捆绑 Ionic 项目的 Polyonic 种子中的脚本），项目启动并且运行完美，node-serialport 没有问题。

如果我随后在项目的根目录中通过运行ning electron builder 构建可执行文件，然后在 Chrome DevTools 控制台中运行可执行文件，我得到这个输出：

Uncaught Error: The module '/home/vic/git/MyProject/build/node_modules/serialport/build/Release/serialport.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 51. This version of Node.js requires
NODE_MODULE_VERSION 53. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or`npm install`).
    at process.module.(anonymous function) [as dlopen] (ELECTRON_ASAR.js:173:20)
    at Object.Module._extensions..node (module.js:598:18)
    at Object.module.(anonymous function) [as .node] (ELECTRON_ASAR.js:173:20)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at bindings (/home/vic/git/MyProject/build/node_modules/bindings/bindings.js:76:44)
    at Object.<anonymous> (/home/vic/git/MyProject/build/node_modules/serialport/lib/bindings.js:3:35)

我知道 SO 上有 other related questions 建议使用 electron-rebuild 来确保本机模块是根据 Electron 期望的节点版本构建的。但是如果我进入项目 src 文件夹，那么运行:

rm -rf node_modules/serialport/build/* 
node_modules/.bin/electron-rebuild -w serialport -f

...然后回到我的项目根文件夹和运行 npm start（它运行和以前一样正常），然后运行 electron-builder 和运行可执行文件，在 Chrome DevTools 控制台中，我得到以下输出：

Uncaught Error: Cannot find module 'serialport'
    at Module._resolveFilename (module.js:470)
    at Function.Module._resolveFilename (/tmp/.mount_7laJTZ/usr/bin/resources/electron.asar/common/reset-search-paths.js:35)
    at Function.Module._load (module.js:418)
    at Module.require (module.js:498)
    at require (internal/module.js:20)
    at Object.<anonymous> (main.js:73788)
    at __webpack_require__ (main.js:20)
    at Object.<anonymous> (main.js:72414)
    at __webpack_require__ (main.js:20)
    at Object.<anonymous> (main.js:111408)

这感觉比做 electron-rebuild 之前的工作更远。我哪里错了？如有任何帮助或建议，我们将不胜感激。

Answer 1

如果您在下一个小时内将项目发送给我，我会调查问题所在。你不需要使用 electron-rebuild —— electron-builder 会自动重建。（我是 electron-builder 的维护者。）

Answer 2

在与@develar 离线处理后，我们能够解决问题。我在这里发回并接受他的回答以在应得的信用额度上给予信用。

This PR 到 Polyonic 项目是一个直接的结果。然而，据我估计，关键的变化是将根 package.json 的构建块修改为：

"build": {
  "appId": "YOUR.APPID.GOES.HERE",
  "directories": {
    "app": "build"
   }
},

... 并确保 electron 在 devDependencies 部分而不是 dependencies 部分。

这里的关键点是 Polyonic，当您运行 npm start 捆绑所有内容并将其放入项目根目录中的构建文件夹中时。然后它运行s cd build && electron . 到运行启动项目。根据 electron-builder 文档：

directories

buildResources = build String - The path to build resources.

output = dist String - The output directory.

app String - The application directory (containing the application package.json), defaults to app, www or working directory.

...所以将build.directories.app设置为'build'告诉electron builder打包构建目录，这正是我需要的。

使用 Ionic2、serialport 和 electron-builder 构建 Electron

Building Electron with Ionic2, serialport, and electron-builder

ionic2

electron

electron-builder

node-serialport