【Electron 快速入门-5】创建 Electron + React + Ts + Webpack + Electron-builder 项目
分类：javascript
使用 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('https://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('https://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