閑言碎語
electron是一個使用Js來做桌面應用的的玩意，大名鼎鼎的vs code就是用這貨做出來的。
node-serialport是一個可以用來訪問電腦上串口的node.js包
Node.js package to access serial ports for reading and writing. Welcome your robotic JavaScript overlords. Better yet, program them!
作為一個只會C語言的渣渣，為了在electron上使用node-serialport折騰了我好一段時間??。主要原因是node-serialport是一個原生庫，使用的時候需要編譯。而electron有自身的node.js環境，原生庫在上面運行之前需要重新編譯。這個編譯過程會從網上下載一堆依賴，也就是因為網絡原因這個過程總會失敗。。。。。。
就在寫這篇文章的今天，無意間百度到了解決方法??。之前一直用 electron serialport這樣的關鍵詞，今天不知道那個抽了哪個筋，改用關鍵詞 electron 原生模塊 找到了這篇文章，里面提到了使用淘寶代理。cnpm我知道，但是萬萬沒想到淘寶代理也有electron的鏡像??。
怎么做
本文假設你已經能使用node-serialport了，沒有的話，還請移步這里。使用這個模塊的時候十有八九需要重新編譯的，因此需要安裝node-pre-gyp，如果是Windows用戶，可以看這里node-gyp installation。這個環境也有的折騰的。不是本文的重點，不提太多??。
node-pre-gyp建議采用全局安裝，這樣可以在cmd上面使用。
另外，好像npm上面的serialport有點問題，建議到GitHub上下載個源碼在本地安裝。
cnpm install electron --save-dev
當然可以使用cnpm install electron@1.6.2 --save-dev來指定版本，這里使用了1.6.2這個版本的electron。
安裝本地的node-serialport包需要使用npm，npm install node-serialport本地路徑。
安裝完之后，大頭的工作才開始，如果順利的話可以一次通過。先將目錄定位到node-serialport。可以使用命令行cd .\\node_modules\\serialport\\。
然后在使用這條命令行來編譯
node-pre-gyp rebuild --target=1.6.2 --arch=x64 --target_arch=x64 --dist-url=https://npm.taobao.org/mirrors/atom-shell
最近在使用electron的時候,發現不用淘寶鏡像也可以成功，建議先試一下這個，不行再換淘寶的。
node-pre-gyp rebuild --target=1.6.2 --arch=x64 --target_arch=x64 --dist-url=https://atom.io/download/electron
其中 --target=1.6.2用來指定electron的版本，--arch用兩種選擇ia32或者x64，--dist-url指定下載頭。
強調
為了保證可以成功，先保證可以在node.js上面成功使用node-serialport！！！
這里提到了node-pre-gyp和node-gyp，兩者什么區別我也不清楚。在Windows下編譯原生庫好像需要vs的一些東西，由于我的電腦上先前安裝了vs2015。我只安裝了node-pre-gyp和py2.7（py3不支持，只能用2.7），然后就可以成功編譯和使用node-serialport。
這這個過程如果報錯了，看看是不是有什么404。如果有十有八九是網絡問題??。
最后一步
如果你順利的話，就來到了最后一步。激動人心的一步。
暫時沒有用GitHub，只能貼代碼了。
下面是package.json的內容
{
"name": "electron_serialport",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"preinstall": "npm install .\\node-serialport-master",
"postinstall": "cd .\\node_modules\\serialport\\ && node-pre-gyp rebuild --target=1.6.2 --arch=x64 --target_arch=x64 --dist-url=https://npm.taobao.org/mirrors/atom-shell"
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^1.6.2"
}
}
這里使用了腳本，可以使用npm install來安裝需要的包并編譯serialport包。請到GitHub上下載node-serialport-master并解壓到工程文件夾下面。
接著是index.js的內容
const {app, BrowserWindow, dialog} = require('electron')
const path = require('path')
const url = require('url')
let win;
app.on('ready', () => {
win = new BrowserWindow()
win.on('close', () => {
win = null;
})
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file',
slashes: true
}))
win.webContents.openDevTools();
})
app.on('window-all-closed', ()=> {
app.quit();
})
然后是count.js的內容，serialport有關的代碼就在這里。
const Serialport = require('serialport');
Serialport.list((err, ports) => {
ports.forEach((port) => {
console.log(port.comName);
});
});
let cnt = 0;
setInterval(() => {
document.getElementById('cnt').textContent = cnt;
cnt++;
}, 1000)
最后是index.html
<!doctype html>
<html>
<head>
<title>electron</title>
</head>
<body>
<h1>
Hello electron!
</h1>
<div id = "cnt"></div>
</body>
<script>require('./count.js')</script>
</html>
這個項目的目錄結構是這樣的，
