前言
现在很多平台上的桌面应用，都是直接通过js项目打包的。我在一个项目桌面项目的源码中，找到了一个打包工具，叫做electron。
下面通过实际部署，学习下这个工具的使用。
教程
electron是什么
Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。
Electron于2013年作为构建Github上可编程的文本编辑器Atom的框架而被开发出来。这两个项目在2014春季开源。
确认当前开发环境
node -v
v8.5.0
npm -v
5.8.0
### 安装你的第一个应用
初始化项目
npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (f) demo1
version: (1.0.0)
description:
entry point: (index.js) main.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /xiaoyu/web打包/f/package.json:
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
```
修改文件
```json
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
安装electron
npm install --save-dev electron
创建main.js
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})
创建index.html
“`html
Hello World!
Hello World!
We are using Node.js ,
Chromium ,
and Electron .
<script>
</script>
运行项目
npm start
demo1@1.0.0 start /xiaoyu//f
electron .
这时候会强制打开窗口，展示为定义的网页内容。
### 打包
安装打包工具
```
npm install electron-packager --save-dev
npm WARN demo1@1.0.0 No description
npm WARN demo1@1.0.0 No repository field.
+ electron-packager@12.0.1
added 75 packages from 50 contributors in 11.562s
修改package.json文件，我的环境是MacOS,在scripts里增加下面的内容。
"package": "electron-packager . 'Hosts' --platform=darwin --arch=x64 --out=./dist --asar --app-version=1.0.0"
运行命名，就能打包了。
npm run-script package
> demo1@1.0.0 package /xiaoyu/web打包/f
> electron-packager . 'Hosts' --platform=darwin --arch=x64 --out=./dist --asar --app-version=1.0.0
Packaging app for platform darwin x64 using electron v1.8.4
Wrote new app to dist/Hosts-darwin-x64
然后在项目的根目录的dist文件夹中找到安装文件。
到此，简单的打包工作就完成了~
## 参考资料
