【前端】网页多平台桌面打包工具 electron 和 electron-packager 的使用

前言

现在很多平台上的桌面应用，都是直接通过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 .

 这时候会强制打开窗口，展示为定义的网页内容。

 ![截图](https://img-blog.csdn.net/20180426142031843?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RpYW5kaWFueGl5dQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)



 ### 打包

 安装打包工具

 ```

  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文件夹中找到安装文件。

到此，简单的打包工作就完成了~

## 参考资料

• https://electronjs.org/
• https://github.com/electron-userland/electron-packager
• https://www.cnblogs.com/zwhbk/p/6396500.html