欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用 Electron 打包 Web 应用

程序员文章站 2022-06-04 15:16:26
...

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 就可以了

相关标签: 前端