在electron中使用node-serialport的正确姿势 #2

hanfengcan · 2018-10-06T08:06:35Z

开发环境准备

node-serialport是一个让node可以访问电脑串口设备的原生模块，在electron环境下使用并不是简单的npm install serialport就能解决的事情。对于刚开始接触node的人来说，不折腾一番基本上是不可能的。如果不明就里的一次性安装成功，那下一次安装多半也需要折腾的。

折腾过程中，免不了在Google，百度，GitHub上掘地三尺找解决方案。

本文尽可能的详细介绍如何在electron中编译并使用seialport。这里使用的系统环境是win10，需要准备一下几个材料：

node-gyp
python2.7 只能python2，不兼容python3
Visual Studio Build Tools 或者 VS

如果你的机器上没有安装过VS的话，并且后面不会使用VS的话，建议安装Visual Studio Build Tools即可。

开始编译

在使用 Node 原生模块一文里介绍好几种使用原生模块的方法。这里介绍前面两种。

通过npm安装

通过设置一些环境变量来实现npm的安装。为了方便，可以选择写个.bat文件来导入这些参数。

@call "C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\VC\Auxiliary\Build\vcvars64.bat"

set PYTHON=D:\Python27
set npm_config_target=3.0.2
set npm_config_arch=x64
set npm_config_target_arch=x64
set npm_config_disturl=https://atom.io/download/electron
set npm_config_runtime=electron
set npm_config_build_from_source=true

这里需要注意前两行的路径。

第一行是Visual Studio Build Tools安装后得到的一些批处理，主要是导入一些变量到cmd。
第二行是python的路径，如果电脑有多个python的话，建议通过set的方式导入到本次命令行。
剩下的都是electron相关的参数。target版本号可以在首页里面找。

到这里，可以尝试执行npm install serialport来安装serialport了。如果安装过程不会报错，则基本上OK了。

如果报错了，看一下报错信息。

如果是有404或者GET请求失败，则是网络问题。

另外，如果先前npm报错过，建议删除node_modules文件夹重新npm install。

使用electron-rebuild

使用rebuild（npm install electron-rebuild --save-dev）来构建serialport不需要设置太多变量，但是下面两行少不了的。

call "C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\VC\Auxiliary\Build\vcvars64.bat"
set PYTHON=D:\Python27

接着执行npm install安装各种依赖。安装完后，执行.\node_modules\.bin\electron-rebuild.cmd重新编译一下，serialport才能在electron里面使用。

编译过程中可以会出错，比如使用了python3或者msbuild版本错误等一堆乱七八糟的错误。具体看错误日志定位问题才能解决。

如果出现下面的提示

C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\Common7\IDE\VC\VCTargets\Microsoft.Cpp.Platform.targets(67,5): error MSB8020: 无法找到 v140 的生成工具(平台工具
集 =“v140”)。若要
使用 v140 生成工具进行生成，请安装 v140 生成工具。或者，可以升级到当前 Visual Studio 工具，方式是通过选择“项目”菜单或右键单击该解决方案，然后选择“重定解决方案目标”。 [F:\1
.前端\cli3\node_modules\node-sass\build\src\libsass.vcxproj]

可以到全局的\node_modules\node-gyp\gyp\pylib\gyp\MSVSVersion.py下修改工具集的版本。
如果是 VS2017 版本号可能是 141

具体使用的看下面

The text was updated successfully, but these errors were encountered:

hanfengcan · 2018-10-06T10:06:43Z

使用serialport

以上工作完成后，就可以在electron使用serial port了。

这里直接贴package.json。

{
  "name": "node-serialport",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "./node_modules/.bin/electron src/main/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "serialport": "^7.0.2"
  },
  "devDependencies": {
    "electron": "^3.0.2",
    "electron-rebuild": "^1.8.2"
  }
}

scripts.dev可以用来启动工程。如果是全局安装的electron，可以改用electron 入口文件。注意，这里的入口文件，其实就是electron说的main线程。

接着，随便写个main线程。里面创建一个BrowserWindow。

const { BrowserWindow, app } = require('electron');
const path = require('path');

let win;

function createWindow() {
  win = new BrowserWindow();
  win.loadFile(path.join(__dirname, '../renderer/index.html'));
  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

在随便写个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>node-serialport</title>
  <script>
    const list = require('serialport').list;
    list().then(ports => {
      ports.forEach(element => {
        document.write(`<div>${element.comName}</div>`);
      });
    });
  </script>
</head>
<body>
  
</body>
</html>

执行npm run dev就可以看到有几个COM了。当然，前提是你的电脑有COM口！

整个工程的文件结构是这样的。

caoxiemeihao · 2019-04-02T13:00:41Z

我明天试试 O(∩_∩)O

caoxiemeihao · 2019-04-06T13:44:25Z

使用serialport

以上工作完成后，就可以在electron使用serial port了。

这里直接贴package.json。

{
  "name": "node-serialport",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "./node_modules/.bin/electron src/main/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "serialport": "^7.0.2"
  },
  "devDependencies": {
    "electron": "^3.0.2",
    "electron-rebuild": "^1.8.2"
  }
}

scripts.dev可以用来启动工程。如果是全局安装的electron，可以改用electron 入口文件。注意，这里的入口文件，其实就是electron说的main线程。

接着，随便写个main线程。里面创建一个BrowserWindow。

const { BrowserWindow, app } = require('electron');
const path = require('path');

let win;

function createWindow() {
  win = new BrowserWindow();
  win.loadFile(path.join(__dirname, '../renderer/index.html'));
  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

在随便写个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>node-serialport</title>
  <script>
    const list = require('serialport').list;
    list().then(ports => {
      ports.forEach(element => {
        document.write(`<div>${element.comName}</div>`);
      });
    });
  </script>
</head>
<body>
  
</body>
</html>

执行npm run dev就可以看到有几个COM了。当然，前提是你的电脑有COM口！

整个工程的文件结构是这样的。

Thanks!

lky94 · 2019-05-15T09:29:49Z

found 3 high severity vulnerabilities
run npm audit fix to fix them, or npm audit for details
请问在安装electron rebuild 是出这个是什么意思

hanfengcan · 2019-05-15T12:57:20Z

大概就是依赖里面有老版本的依赖吧, 提示fix. 好像执行后, 还会有同样的提示.

found 3 high severity vulnerabilities
run npm audit fix to fix them, or npm audit for details
请问在安装electron rebuild 是出这个是什么意思

lky94 · 2019-05-16T00:54:31Z

An unhandled error occurred inside electron-rebuild
Unable to find parent node_modules directory, specify it via --module-dir, E.g. "--module-dir ." for the current directory

Error: Unable to find parent node_modules directory, specify it via --module-dir, E.g. "--module-dir ." for the current directory
at Object. (C:\Users\User\node_modules\electron-rebuild\lib\src\cli.js:94:23)
at Generator.next ()
at fulfilled (C:\Users\User\node_modules\electron-rebuild\lib\src\cli.js:5:58)

请问当我写了.\node_modules.bin\electron-rebuild.cmd 他出上面的error如何解决

hanfengcan · 2019-05-16T01:17:46Z

.\node_modules.bin\electron-rebuild.cmd 这个路径????

.\node_modules\.bin\electron-rebuild.cmd

lky94 · 2019-05-16T07:05:59Z

执行.\node_modules.bin\electron-rebuild.cmd重新编译一下，serialport才能在electron里面使用。

我照上面的指示做

lky94 · 2019-05-16T07:53:55Z

请问这是nodeserial 还没安装好的意思吗？

hanfengcan · 2019-05-16T08:56:00Z

@lky94 对, 估计编译不成功. 确定网络没问题. 翻墙后一遍都不用编译的

lky94 · 2019-05-16T09:49:51Z

.\node_modules.bin\electron-rebuild.cmd
这个路径如何用放在cmd里？

hanfengcan · 2019-05-16T14:11:28Z

@lky94 只能在cmd里面执行而已吧. 输入 .\node_modules.bin\electron-rebuild.cmd 回车就行

lky94 · 2019-05-16T15:20:07Z

请问你一开始说的node-gyp 如何使用我打进去有error

hanfengcan · 2019-05-17T03:13:39Z

@lky94 你还是看这篇文档吧, 我这方法可能不适用新版本. https://electronjs.org/docs/tutorial/using-native-node-modules

Alanlaosan · 2019-10-09T11:57:54Z

node-gyp就是为node编译c++扩展的时候使用的编译工具，那么为什么要安装python2.7呢？

hanfengcan changed the title ~~在electron中使用[node-serialport](https://github.com/node-serialport/node-serialport)的正确姿势~~ 在electron中使用node-serialport的正确姿势 Oct 6, 2018

hanfengcan added the electron label Oct 6, 2018

hanfengcan mentioned this issue Oct 28, 2018

error if i try to run serialport/node-serialport#1711

Closed

hanfengcan mentioned this issue Nov 11, 2018

how to use node-serialport on the electron #5

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

在electron中使用node-serialport的正确姿势 #2

在electron中使用node-serialport的正确姿势 #2

hanfengcan commented Oct 6, 2018 •

edited

hanfengcan commented Oct 6, 2018

caoxiemeihao commented Apr 2, 2019

caoxiemeihao commented Apr 6, 2019

使用serialport

lky94 commented May 15, 2019

hanfengcan commented May 15, 2019

lky94 commented May 16, 2019

hanfengcan commented May 16, 2019

lky94 commented May 16, 2019

lky94 commented May 16, 2019

hanfengcan commented May 16, 2019

lky94 commented May 16, 2019

hanfengcan commented May 16, 2019

lky94 commented May 16, 2019

hanfengcan commented May 17, 2019

Alanlaosan commented Oct 9, 2019

在electron中使用node-serialport的正确姿势 #2

在electron中使用node-serialport的正确姿势 #2

Comments

hanfengcan commented Oct 6, 2018 • edited

开发环境准备

开始编译

通过npm安装

使用electron-rebuild

hanfengcan commented Oct 6, 2018

使用serialport

caoxiemeihao commented Apr 2, 2019

caoxiemeihao commented Apr 6, 2019

使用serialport

lky94 commented May 15, 2019

hanfengcan commented May 15, 2019

lky94 commented May 16, 2019

hanfengcan commented May 16, 2019

lky94 commented May 16, 2019

lky94 commented May 16, 2019

hanfengcan commented May 16, 2019

lky94 commented May 16, 2019

hanfengcan commented May 16, 2019

lky94 commented May 16, 2019

hanfengcan commented May 17, 2019

Alanlaosan commented Oct 9, 2019

hanfengcan commented Oct 6, 2018 •

edited