使用 Electron 打包 Web 应用

1、 npm 初始化项目

新建一个文件夹作为项目文件夹
使用 npm init 初始化文件夹
生成一个 package.json 文件
修改 package.json 里面的 "main": "index.js"

2、 安装 electron 到项目文件夹

在项目文件夹下执行以下命令

npm install --save-dev electron

/** 
  * 这一步我用 cnpm 安装的，cnpm 的具体安装方法可百度
  * --save-dev 可以自动更新 package.json 里面的 "devDependencies"， 
  * 不用自己手动更新
 */

3、 新建一个 index.js 入口文件

在项目文件夹里面新建一个 index.js 文件
并在里面复制以下代码

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

function createWindow () {   
  // 隐藏菜单栏
  Menu.setApplicationMenu(null)
  // 创建浏览器窗口
  const win = new BrowserWindow({
    icon: './logo.ico', // 设置窗口左上角的图标
    show: false,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 下面这两行代码配合上面 new BrowserWindow 里面的 show: false，可以实现打开时窗口最大化
  win.maximize()
  win.show()

  // 并且为你的应用加载index.html
  win.loadFile('index.html')

}

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

// 当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件，然后用 require 导入。

4、 新建一个 index.html 文件作为项目文件

在项目文件夹里面新建一个 index.html 文件，这个跟 index.js 文件里面声明的 win.loadFile('index.html') 是一致的

5、 安装 electron-packager 进行 web 应用打包

在项目文件夹中使用以下命令安装 electron-packager

npm install --save-dev electron-packager

// 这里同样可以使用 cnpm 来进行安装

6、 在 packager.json 中添加相应的 script 脚本

** 注意： **
** 在执行 npm run packager 的时候可能会遇到卡住的情况，**
** 这时候只要设置一下 eletron_mirror 就好了 **
npm config set registry https://registry.npm.taobao.org/
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

start 这一行可以使用 npm run start 来进行快速的打开运行你的web应用
packager 这一行使用 npm run packager 来进行应用的打包，生成 .exe 等可执行文件

"scripts": {
    "start": "electron .",
    "packager": "electron-packager . 'app' --platform=win32 --arch=x64 --out=./build --electron-version 9.0.2 --app-version 1.0.0 --overwrite --icon=./logo.ico"
  },

然后执行一下 npm run packager 就可以了