electron 开发经验之谈系列-基本项目搭建

本文最后更新于:2021年2月19日 晚上

环境

  • Windows 10
  • NodeJS 12
  • WebStorm
  • VSCode(编写 markdown 文档)

创建 lerna 项目

创建目录 _electron_example_,然后使用 yarn 初始化

mkdir electron_example && cd electron_example
yarn init -y

修改 package.json

{
  "name": "electron_example",
  "version": "1.0.0",
  "private": true,
  "license": "MIT",
  "workspaces": {
    "packages": ["apps/*"]
  }
}

随后创建 lerna.json 配置文件

{
  "packages": ["apps/*"],
  "version": "independent",
  "npmClient": "yarn",
  "useWorkspaces": true
}

初始化目录如下

  • apps
    • main: 主进程
    • renderer: 渲染进程
  • node_modules
  • lerna.json
  • package.json
  • yarn.lock

参考: https://github.com/rxliuli/electron_example/tree/b9628e1fd16bb5b6807e55e9ca72fdf2daf5bfde

初始化渲染层模块

在 renderer 目录中使用 create-react-app 创建一个 react 项目,并添加

npx create-react-app apps/renderer/ --template typescript

不过还需要修改其中部分配置,主要包含

  • 删除 yarn.lockpackage-lock.json 文件

参考: https://github.com/rxliuli/electron_example/tree/8e0920af985e1201fc05ca36302e094532843c2d

尝试再 yarn 安装依赖,接着再使用 yarn start 启动开发环境,应该可以在浏览器中看到默认的页面。

20210106194304.png

初始化主进程模块

参考: https://github.com/rxliuli/electron_example/tree/a78885b76de9322dfdac82e2c220b7c6e0a9617f
注:electron 版本选择双数,生命周期更长。

初始化主进程模块,主要包括

为主进程创建 package.json

{
  "name": "main",
  "version": "0.1.0"
}

添加依赖 yarn add electron electron-builder typescript

// package.json
{
  "devDependencies": {
    "electron": "^10.2.0",
    "electron-builder": "^22.9.1",
    "typescript": "^4.1.3"
  }
}

添加 tsconfig.json 配置文件

// tsconfig.json
{
  "compilerOptions": {
    // nodejs 生态大多数都支持这种模块
    "module": "commonjs",
    // 优先考虑输出 es5
    "target": "es5",
    // 但不要自缚手脚,仍然使用最新的 es 特性
    "lib": ["ESNext"],
    // 定义源目录与输出目录
    "rootDir": "src",
    "outDir": "dist",
    // 生成 sourceMap 方便 IDE 本地调试
    "sourceMap": true,
    // 禁止 ts 检查 npm 依赖的类型定义(例如 electron 的类型定义就很容易被 ts 检查出错误,毕竟这个项目实在太大了)
    "skipLibCheck": true,
    "skipDefaultLibCheck": true
  },
  // 排除依赖目录与输出目录
  "exclude": ["node_modules", "dist"]
}

添加 src/main.ts 基本的启动文件

// src/main.ts
import { app, BrowserWindow } from "electron";

async function createMainWindow() {
  // 创建新的 electron 窗口
  const mainWindow = new BrowserWindow();
  // 载入开发环境的 url
  await mainWindow.loadURL("http://localhost:3000/");
}

/**
 * main 函数
 */
async function main() {
  app.on("ready", createMainWindow);
}

main();

更新 package.json 添加几个 npm script

// package.json
{
  "scripts": {
    // 编译 ts 代码
    "compile": "tsc",
    // 编译 tsc 代码且启动监听模式
    "watch": "yarn compile -w",
    // 在主进程通过 lerna 启动渲染进程模块的开发环境
    "dev:web": "lerna run --scope renderer start",
    // 启动主进程的开发环境
    "dev:electron": "electron ./dist/main.js"
  }
}

接下来,我们通过这些 npm script 启动 electron 开发环境

  1. 运行 yarn watch
  2. 运行 dev:web
  3. 等待以上两条命令都运行完成,再继续运行 dev:electron

现在,你应该可以看到一个 electron 窗口,其中显示着。

20210106194102.png

总结

目前,使用 lerna monorepo 似乎还看不出来明显的优点,不过实际上在后面逐步完善 Electron 程序的过程中我们会发现它的强大之处。