electron 运行 dist 文件

本文，我们来讲讲如何通过 electron 运行打包文件。

我们的 Demo 环境：

angular 打包的 dist 文件
MacBook Air (M1, 2020)
Visual Studio Code

获取 dist 文件

我们来简单生成 dist 文件，根据 Ant Design of Angular 的介绍新建项目并打包即可。

PS：当然了，你也可以简单其一个 index.html 文件做演示

得到的打包项目结构如下：

很平常的一个单页应用。我们将其放在新建 electron 项目根目录下，以备后用。

新建 electron 项目

我们根据创建您的第一个 electron 应用程序就可以很轻松的创建 electron 应用。

我们创建项目使用到关键包 "electron": "^26.1.0" 和 "electron-packager": "^17.1.2"。针对真实的生成环境，我们做了相关的一些调整：

1. 区分 window 和 mac 打包

我们的开发平台在 mac 上，通过执行 npm run make 可以默认是打包了 mac 平台的安装包。

针对 window 的平台，我们引入了 electron-package 来执行，比如我们编写打包命令行：

代码语言：javascript复制

"make-win": "npx electron-packager ./ custom-package-name --platform=win32 --arch=x64 --out=jimmy-dist --overwrite --icon=./static/logo.ico --ignore='out|README.md|Jenkinsfile'"

下面我们来解析下：

npx electron-packager 运行本地安装的可执行文件 electron-packager
./ 代表当前的目录，是要被打包的 electron 应用程序所在的位置
custom-package-name 自定义的最终打包的名称
--platform=win32 指定目标平台是 Window 32-bit
--arch=x64 指定目标架构是 x64(64-bit)
--out=jimmy-dist 指定输出的目录是 dist 文件夹
--overwrite 如果存在相同名称的目录，则覆盖之前的打包文件
--icon=./static/logo.ico 设定应用程序的图标文件路径
ignore='out|README.md|Jenkinsfile'" 忽略的打包文件

2. 更改图标

上面我们也提及了更改 window 的图表 --icon=./static/logo.ico，那么，我们可以通过设置 forge.config.js 来更改当前 mac 的图标：

代码语言：javascript复制

packagerConfig: {
  asar: true,
  icon: path.resolve(__dirname, 'static/logo.ico') // build app icon
}

3. 自定义菜单栏

我们需要定制自己需要的菜单栏，那么，我们可以通过在程序中设置 menu 即可，下面的设置菜单代码可以做参考：

代码语言：javascript复制

// create a custom menu
const createCustomMenu = () => {
  const template = [
    {
      label: '', // for project title tag placeholder
    },
    {
      label: '菜单',
      submenu: [
        {
          label: '刷新',
          click: () => {
            BrowserWindow.getFocusedWindow().reload();
          }
        },
        {
          label: '返回',
          click: () => {
            if (mainWindow && mainWindow.webContents.canGoBack()) {
              mainWindow.webContents.goBack();
            }
          }
        },
        {
          label: '关闭',
          click: () => {
            app.quit();
          }
        }
      ]
    },
    {
      label: '调试',
      submenu: [
        {
          label: '控制台',
          click: () => {
            BrowserWindow.getFocusedWindow().webContents.openDevTools();
          }
        }
      ]
    }
  ];
  
  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);
}

上面我们设置了 菜单 和 调试 的菜单。

electron 中整合打包的 dist 文件

我们运行 dist 文件，其实就是起一个本地服务就行了。这里，我们使用 http-server 来运行。

PS：当然，我们也可以使用 koa，express 等

假设我们已经安装好了 http-server 依赖，那么，我们进入项目根目录，直接执行 http-server -p 8082 dist/ 就可以在浏览器 http://localhost:8082 打开该 dist 应用。

那么，我们怎么在 electron 中运行它呢？如下：

代码语言：javascript复制

// 开启服务
const triggerServer = (host, port, directory) => {
  const server = createServer({
    root: path.join(__dirname, directory) // 指定服务器根目录
  });

  server.listen(port, host, () => {
    console.log(`Server running at http://${host}:${port}/`)
  })
  return server;
}

上面我们封装了个开发服务的方法，方便多个服务开启。我们只要传入 host，port 和 directory （打包文件的目录）即可。

在 electron 应用 ready 之后，我们开启服务：

代码语言：javascript复制

const { createServer } = require('http-server');

app.whenReady().then(() => {
  const server1 = triggerServer("localhost", "8081", "dist");
  
  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false
    },
    width: 800,
    height: 600,
    title: 'ElectronDist',
    icon: path.join(__dirname, './static/logo.png') // for window platform
  });

  if(process.platform === 'darwin') { // mac platform
    app.dock.setIcon(path.join(__dirname, './static/logo.png'))
  }
  
  mainWindow.loadURL("http://localhost:8081")
  
  app.on('before-quit', () => { // 记得关闭
    server1.close();
  });
})

在 before-quite 钩子函数，即退出之前，即可关闭服务。

我们 npm run start 运行之后，项目的效果如下图：

参考

Ant Design of Angular
创建您的第一个 electron 应用程序
http-server

打包 electron 服务开发调试

0 人点赞