Electron-开发实践：使用Monorepo管理Electron项目

【前言】

本文讲如何用 monorepo 来管理一个 electron 项目

代码地址： https://github.com/uikoo9/dishi-monorepo/tree/electron-monorepo

【初始化】

首先需要初始化一个 monorepo 前端项目，

具体步骤可以看这里：初始化前端Monorepos项目

初始化后项目结构如下，

【渲染进程】

采用 monorepo 来管理项目的好处是

1.各端或者各模块只需要负责自己的 package 即可

2.如果各个 package 有相互依赖可以很好的解决

本文中的渲染进程在 packages/dishi-renderer，

采用 react+webpack 实现了渲染进程，

这里不限制具体的实现技术，

比如你可以用 react，vue，甚至 jquery，

构建工具可以使用 webpack，rollup，vite 等，

但是需要有一个 build 命令，

  "scripts": {
    "build": "qwebpack build ./electron.webpack.js"
  },

这个build 命令将渲染进程的构建产物，

生成到 packages/dishi-main/renderer 文件夹下，

这样做的好处

1.独立

渲染进程，偏传统的前端 web 开发，

只需要关注自己的 package，即 packages/dishi-renderer，

这里可以采用你想用的任何技术，只要可以实现最终的 ui 效果

2.精简

只将最终的构建产物生成到主进程下，

这样不会引入多余的 npm 包依赖，

减少最终应用包的大小

3.缓存

这里如果你使用 lerna 和 nx 来管理项目，

一文学会用Lerna管理多个npm包

强大的构建系统：NX

Nx-VS-Lerna

那么可以在项目外层的 package.json 中添加如下命令，

{
    "build": "lerna run build --scope=dishi-renderer",
}

添加后即可使用 nx 的缓存能力，如下

如果没有使用 nx，每次构建大概 2-3s，

如果使用了 nx，且源码没有改动，每次构建大概ms 级别，

【主进程】

本文中的主进程在 packages/dishi-main 下，

可以看到主进程代码在 main 文件夹下，

渲染进程代码是 dishi-renderer 这个 package 构建到 renderer 文件夹下的，

另外 package.json 内容也比较简单，

因为这个 packag.json 是打包后的入口，

{
  "name": "dishi",
  "private": true,
  "version": "2.0.3",
  "main": "main/index.js",
  "dependencies": {
    "qiao-electron": "^3.2.6",
    "qiao-json": "^3.1.2",
    "qiao-sqlite": "^3.2.3"
  }
}

【启动和打包】

可能有的人会问了，

为什么在主进程的 packaeg.json 中没看到启动的 start 命令呢，

这里要讲到 packages/dishi-electron，

这个包有两个作用

1.提供开发时的 electron 环境

2.将应用打包

启动

启动是指依赖 electron 这个包，本地启动应用，

但是 electron 这个包又不需要依赖到主进程中，

因为打包的时候会将 electron 的环境打包进去，

所以在 dishi-electron 这个 package中的依赖如下，

{
  "name": "dishi-electron",
  "private": true,
  "version": "2.0.6",
  "devDependencies": {
    "electron": "^25.1.1"
  },
  "scripts": {
    "start": "electron ../dishi-main"
  }
}

这里就可以用 start 命令来本地启动应用了，

同时在最外层的 package.json 中也可以添加命令，

方便使用，

{
    "build": "lerna run build --scope=dishi-renderer",
    "start": "npm run build && npm run start -w dishi-electron"
}

打包

另一个部分能力就是打包应用了，

完整的 package.json 内容如下：

{
  "name": "dishi-electron",
  "private": true,
  "version": "2.0.6",
  "devDependencies": {
    "electron": "^25.1.1",
    "electron-icns": "^3.2.3",
    "qiao-electron-cli": "^3.3.0",
    "qiao-file": "^3.1.9"
  },
  "scripts": {
    "start": "electron ../dishi-main",
    "icon": "electron-icns ./pack/icon/pic.png",
    "dist": "gulp -f ./pack/gulp/pack-dist.js",
    "packmac": "qelectron pm ./pack/electron.config.js",
    "packdmg": "qelectron pd ./pack/electron.config.js",
    "uploaddmg": "qelectron ud ./pack/electron.config.js"
  }
}

打包的具体方法，在另外的文章介绍

【总结】

1.使用 monorepo 来管理一个 electron 项目

2.packages/x-renderer 用来存放渲染进程代码

3.packages/x-main 用来存放主进程代码

4.packages/x-electron 用来提供 electron 本地环境和打包应用