windows下快速搭建electron开发环境-xdsnet-ChinaUnix博客

作为一种用javascript写桌面程序的开发方式，现在已经被大众接受。下面就介绍如何在windows（>win7）下快速搭建Electron开发环境。
1. nodejs 的安装
从下载最新版本的windows安装程序进行安装，我下载的是v6.6.0，安装时一路默认即可，这个安装会把nodejs和npm配置到系统PATH中，
这样在命令行的任何位置都可以直接用node执行nodejs，用npm执行npm命令。因为可能的wall问题，所以建议把npm的仓库切换到国内taobao仓库，执行下面的命令：

npm config set registry ""

2. Electron的安装
因为前面已经启用了node/npm，所以可以采用npm的方法安装Electron。
为了测试的方便，我是在命令行窗口中采用下面的命令:

npm install -g electron

把Electron安装到系统全局中的。你也可以在你开发项目下采用不加'-g'的命令进行安装。

3. 编程环境安装
当前微软提供了一个强大的免费开发工具 ,直接下载安装即可，它支持nodejs等的代码提示，很是方便。

4. 打包输出工具
为了方便最终成果输出，建议安装工具，安装也很简单，建议以下面的命令全局安装。

npm install -g electron-packager

5. 如果需要采用git进行版本控制，建议安装git工具
直接在下载最新版本的安装即可。

至此实际上开发环境已经搭建好了。下面说一下开发流程。

到空白的项目目录中，打开命令行窗口（也可以打开git bash）
0. 如果需要git，先做

git init

1.构建项目package.json文件

npm init

根据需要输入内容（下面的内容根据编写）。即在package.json中有如下内容：

 { 
      "name" : "electron-quick-start", 
      "version" : "1.0.0", 
      "main" : "main.js" 
}

2.重新写入依赖

npm install electron --save
npm install electron-packager --save-dev

3.在main.js中输入

const {app, BrowserWindow} = require('electron')
let win
function createWindow () {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(`file://${__dirname}/index.html`)
win.webContents.openDevTools()
// 处理窗口关闭
win.on('closed', () => {
win = null
})
}
// Electron初始化完成
app.on('ready', createWindow)
// 处理退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})

4. 在index.html中输入

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
node 当前使用的node为<script>document.write(process.versions.node)</script>,
Chrome 为<script>document.write(process.versions.chrome)</script>,
和 Electron 为<script>document.write(process.versions.electron)</script>.
</body>
</html>

5. 测试执行

electron .

这将打开一个新的窗口，如图

也可以统一纳入npm管理，即在package.json中添加字段定义

"scripts": {
"start":"electron ."
}

这样就可以在命令行中用 npm start 来启动程序。
6. 打包输出

electron-packager . --platform=win32

将在项目目录下建立一个输出文件夹“electron-quick-start-win32-x64”(注意这里的目录名称win32-x64前的部分是package.json中name字段值)，里面就是放置的整个项目的打包，可以复制这个文件夹到任何win32环境中运行（其中electron-quick-start.exe其启动文件），这个工作也可以纳入npm统一管理，在package.json 的“scripts”字段下增加子字段定义即可。如：

"scripts": {
"start":"electron .",
"win32pack":"electron-packager . --platform=win32 --overwrite"
}

这样就可以在命令行中用 npm run win32pack 来输出win32环境下的打包程序("--overwrite"选项用于覆盖输出)。