【Electron 快速入门-5】建立 Electron + React + Ts + Webpack + Electron-builder 项目

使用 create-react-app 建立 React + Ts 项目

• 执行建立

npx create-react-app electron-demo --template typescript
复制代码

• 运行

yarn start
复制代码

添加 Electron

安装依赖

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ yarn add electron -D
复制代码

建立主进程入口文件

在前面「建立最简单的 Electron」应用中，咱们在根目录下新建了 main.ts 做为主进程入口文件。

为了更加贴切 Web 开发，咱们项目以 Web 为主首先建立了 Web。所以，咱们建立 electron 目录，存放与 Electron 主进程相关内容。

新建 electron/main.ts 文件。

编译与启动主进程

前面，咱们提到在 electron 开发中分为主进程与渲染进程, 二者属于不一样进程，能够看做是不一样的 bundle。

• 渲染进程中，咱们 tsc 的编译 module 能够是 esnext
• 在主进程中（Node），module 则为 commonjs

固然，因为咱们的前端是运行在 electron(具有 node)，咱们也能够直接使用同一个 tsconfig 配置文件, module 配置为 commonjs。

• 编译与启动主进程

若是咱们指望我们的项目，既能够独立部署 web ，也能够构建 electron 的时候，则须要进行区分。

web 开启 node 能力

在 electron 环境中，咱们的 web 是可使用 node 能力的，但咱们须要作一些编译配置。

• Web 开启 node 能力

运行 electron

主进程实现打开窗口

在 electron/main.ts 中：

import { app, BrowserWindow } from 'electron';



function createWindow () {

 // 打开窗口

 const win = new BrowserWindow({

 width: 800,

 height: 600,

 webPreferences: {

 nodeIntegration: true,// 打开 node 选项

 contextIsolation: false // v12 中关闭此选项以得到在窗口中使用 node 的能力

 }

 })



 win.loadURL('http://localhost:3000')

 };



app.whenReady().then(() => {

 createWindow();

 });
复制代码

启动与运行

yarn start # 启动前端（electron 渲染进程）

yarn dev:main # 启动 electron 主进程
复制代码

前端运行在 Electron 里的时候，咱们能够把前端部分叫作：渲染进程

构建

主进程 Webpack 处理

• Webpack 处理主进程

添加 electron-builder 依赖

yarn add electron-builder -D
复制代码

添加 electron-builder 配置文件

咱们在构建 Electron 以前，有这些环节：

• 构建渲染进程 bundle
• 构建主进程 bundle

所以，在 Electron 构建中，咱们会把上述产物复制到应用中，上述产物通过咱们上面的配置，存在于：

• 渲染进程 bundle => ./dist
• 主进程 bundle => ./electron-main

新建 config/builder.js, 并复制主进程、渲染进程 bundle:

module.exports = {

  asar: false,

  extends: null, // fix bug https://github.com/electron-userland/electron-builder/issues/2030

  publish: {

    provider: 'generic',

    url: '',

  },

  files: [

    {

      from: './build',

      to: './build'

    }, {

      from: './.electron-main',

      to: './electron'

    },

    {},

  '!node_modules',

  'package.json'

  ],

};
复制代码

package.json 相关配置

• 修改前端静态资源相对位置

{

    "homepage": ".",

}
复制代码

• 修改主进程入口文件

{

    "main": "./electron/main.prod.js",

}
复制代码

• 添加打包相关命令

{

   "scripts": { 

    "build:renderer": "react-app-rewired build",

    "build:main": "webpack --config ./config/webpack.main.js",

    "pack:electron": "yarn build:renderer && yarn build:main && electron-builder build --publish never --config ./config/builder.js",

  }

}
复制代码

修改窗口加载路径

在开发的时候，咱们窗口加载 webpack-dev-server 地址:

win.loadURL('http://localhost:3000')
复制代码

打包后，咱们加载的是本地 html 文件，即编译后的地址，好比：咱们编译后的入口 html 地址为：

build

├── asset-manifest.json

├── favicon.ico

├── index.html

├── ...
复制代码

• build/index.html

基于上面构建配置中，咱们配置的拷贝地址：

{

      from: './build',

      to: './build'

    }
复制代码

所以，咱们加载的路径是：

const isDev = process.env.NODE_ENV === 'development';

win.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '..')}/build/index.html`)
复制代码

打包测试

执行 yarn pack:electron, 默认产物在 dist 目录下：

├── builder-debug.yml

├── builder-effective-config.yaml

├── electron-tech-demo-0.1.0-mac.zip

├── electron-tech-demo-0.1.0.dmg

├── electron-tech-demo-0.1.0.dmg.blockmap

├── latest-mac.yml

└── mac

    └── electron-tech-demo.app
复制代码