electron 把前端项目打包成桌面应用

electron 集成了nodejs 和chromium。所以也“继承”了chromium 处理js和进行页面渲染显示的逻辑，目前了解到的是支持多进程模式。所以需要优先配置node环境。

前期环境搭建以及测试可以参考https://blog.csdn.net/qq_35057009/article/details/89638688。

然后开始构建我们的electron 项目，对于快速搭建项目，打包应用，不建议自己一步一步创建文件。因为没有必要。开篇也说了，electron 不是一种新技术，它是整合了nodejs 和 chromium 的一个框架。所以从“原生”支持nodejs 和 js 的语法。

使用默认的electron-quick-start 快速搭建项目框架，然后把原来web项目的目录引入。就可以开始打包自己的桌面应用了。这里的桌面应用其实是通过chromium浏览器内核打包出来的一个应用，可以认为是一个微缩版的浏览器。

我这里配置了git环境。

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install // 或者 yarn install
npm start

然后简单剖析一下，整个项目运行过程

 

package.json: 配置整个项目，包括运行入口点，以及打包脚本等； 启动项目指令 npm start 命令 其实是 运行了 electron . 命令，该命令会从当前目录文件中寻找 package.json 文件，找到 package.json 文件 然后读取 package.json 文件 中的 main 值，main值 指向 main.js文件，然后运行 man.js 文件，找到index.html文件，创建桌面应用实例。
main.js: 配置整个应用程序启动前的参数，样式等。这里其实配置的就是用于创建chromium的样式，或者说是自定义浏览器的样式。

main.js: 

// Modules to control application life and create native browser window

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

const path = require('path')

 

function createWindow() {

  // Create the browser window.

  const mainWindow = new BrowserWindow({

    width: 800,

    height: 600,

    webPreferences: {

      preload: path.join(__dirname, 'preload.js')

    },

    resizable: false,

    frame: false,//边框，隐藏默认的标题栏，菜单栏，只显示页面内容

    fullscreen: false//全屏，隐藏任务栏的全屏模式，类似浏览器的F11模式

  })

  mainWindow.maximize(); // 保留任务栏的全屏模式

 

  // and load the index.html of the app.

  mainWindow.loadFile('App/index.html')//loadURL(`file://${__dirname}/index.html`)//

 

  // Open the DevTools.

  // mainWindow.webContents.openDevTools()

}

 

// 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 macOS 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 macOS 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 (BrowserWindow.getAllWindows().length === 0) createWindow()

})

 

// In this file you can include the rest of your app's specific main process

// code. You can also put them in separate files and require them here.

 

创建全局对象app, BrowserWindow, 猜测一下可能是去配置chromium启动前的参数，消息循环等；

ready : 开始创建应用程序窗口，全屏模式，是否可以改变大小，最大化最小化等。最总要的一句是

 mainWindow.loadFile('App/index.html')              // electron 3.0以上的版本才有的参数，打包的时候可能会报错，注意

//loadURL(`file://${__dirname}/index.html`)//        // 3.0 以下的版本，`file://${__dirname}/index.html`，这是构造了本地文件的绝对路径，注意不是引号，是ESC 下面的那个~。

这里着重说一下，遇到大坑。我遇到的还是[loadFile is not a function].我的electron确定是8.0的版本。

 

 

如何查看electron 的版本号，其实在package.json 文件中就有，通过命令行可以参考如下

https://www.cnblogs.com/462079558/p/11040003.html 

程序运行起来，也可以看到，默认chromium是多线程模式

 最后简单说一下打包的问题

安装electron-package。打开Windows PowerShell，输入“npm install electron-packager -g”，回车

如果感觉慢，可以修改一下npm镜像位置

npm config set ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/

 构建脚本，配置在package.json

执行命令npm run-script + name, 其中name 就是package.json脚本中scripts下定义的打包指令，可以定义n多条, 具体参数含义，简单解释如下

./表示当前路径
GisPlatform：exe应用的名称
platform: 打包平台 darwin, linux, mas, win32或者选择all
arch: 可选 ia32, x64, armv7l, arm64或者选择all
electron-version： electron的版本（）
out：生成的exe保存目录
overwrite:使用了这个参数，每次打包就不用把原来exe删除，可直接覆盖了。

打包的时候可能会遇到报错的问题，提示类似“.....not permitted.....”，找了一下解决了，需要清楚一下缓存

npm cache clear --force

打包成功目录结构