假如你对建立Electron+React开发环境感兴趣，那么这一篇介绍Electron React Boilerplate不容错失。本文并不合适webpack零基础同学看，其中会省略webpack中常见的装备。（Electron React Boilerplate，以下简称erb）

窥探Electron React Boilerplate，熟悉搭建Electron开发环境

建立Electron开发环境需要处理的关键问题

1 开发环境最重要的热更新

热更新主进程，发动electron

一般情况下，咱们经过npx electron .发动electron项目，经过package.json中的main找到进口文件发动，而不是经过yarn add electron后引进，再经过node main.js发动，怎么是这样的话，咱们能够经过nodemon main.js进行热更新了，可是并不是这样的，这儿咱们需要引进electronmon了，它的效果跟nodemon差不多，都是监听文件改变并重启运用，这样一来主程序的热更新就处理了。

热更新烘托进程，发动React开发环境

这个应该算是比较多人熟悉的吧，利用webpack-dev-server即可，能够知道的是运用webpack打包编译并不需要把js代码转到低版别ES5之类的操作，因为electron本来便是基于最新的Chromium，对新特性支持度很高，不要进行转化，webpack装备中target值需要设置为target: ['web', 'electron-renderer']，让webpack知道你打包后的用途，webpack会根据目标值做对应的处理。

热更新preload文件

运用过electron的人都知道preload吧，在最新版别中，preload文件建立React烘托进程和main主进程的桥梁，经过contextBridge.exposeInMainWorld()将electron或许node的api或许自界说的函数暴露到window上，使得React代码中能够运用额外的api，跟主进程进行通讯。或许直接处理信息状况。所以preload的热更新也很有必要，其实electronmon也会监听主程序引进的文件，区分是main主进程文件和renderer进程文件改变，主进程文件改变直接重启整个运用，烘托进程就从头加载这个文件或许地址,终端会提示如下面代码

[2] [electronmon] main file change: src\main\home.ts
[2] [electronmon] restarting app due to file change

[2] [electronmon] renderer file change: src\main\preload.ts

但主程序不能引进ts文件，所以用ts编写preload代码时需要再开一个webpack敞开watch形式，然后主程序引进编译后的preload文件，watch形式下preload.ts文件改变会实时更新主程序引进的preload.js，electronmon会开始作业。

2 command指令次序

在electron运用开发环境中，一般来说，咱们本地敞开的localhost服务加载时间是要比electron程序敞开时间长的，所以erb让敞开localhost服务的指令先履行，再由webpack-dev-server供给的devServer.setupMiddlewares去敞开子进程发动electron程序。在package.json的scripts中界说了start,start:main,start:preload,start:renderer，localhost服务即是咱们的烘托进程start:renderer,

"start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer"这儿先运用ts-node去履行一个检查函数，这个函数回去判别当时默许端口是否被占用了，假如没有被占用就履行npm run start:renderer，然后进入webpack装备文件中运用setupMiddlewares调用spawn敞开子进程履行start:preload和start:main

3 怎么支持typescript

在electron官网介绍中咱们能够得知其彻底支持ts编写，并拥有官方声明文件，可是咱们运转electron运用运用的是npx，依靠于node，node不能直接履行ts文件，你或许想到用tsc监听转化再运转，可是功率很差，而ts-node能直接运转ts文件，也更加成熟文档，这使得运用整个发动过程更优雅。运用也很简单，ts-node供给了node标志， -r ts-node/register，能够在不运用ts-node的cli情况下注册运用ts-node，在erb中是这样运用的，这样在开发环境中也能编写ts代码了，而preload，renderer的代码编写的ts则是由webpack中的ts-load处理的

electronmon -r ts-node/register/transpile-only ./src/main/main.ts

生产环境与开发环境的部分重要差异

1 界说大局环境变量

无疑cross-env这个包能够轻松供给跨渠道的对大局变量进行界说。生成形式下cross-env NODE_ENV=production，开发形式下cross-env NODE_ENV=development

2 烘托进程在不同环境下需要分开处理

在electron中主进程担任整个运用的，烘托进程担任单一窗口，烘托进程要么经过文件加载烘托，要么经过加载URL烘托，在erb中，有这么一个函数它界说了在不同环境下烘托形式，开发环境下运用new URl(),生产环境运用file://读取现已打包好的本地文件。

export let resolveHtmlPath: (htmlFileName: string) => string;
if (process.env.NODE_ENV === 'development') {
  const port = process.env.PORT || 1212;
  resolveHtmlPath = (htmlFileName: string) => {
    const url = new URL(`http://localhost:${port}`);
    url.pathname = htmlFileName;
    return url.href;
  };
} else {
  resolveHtmlPath = (htmlFileName: string) => {
    return `file://${path.resolve(__dirname, '../renderer/', htmlFileName)}`;
  };
}

那么开发环境下咱们就需要借助Webpack-dev-server敞开本地服务了，

3 preload引证途径

运转build运用webpack打包main主进程的代码，这其中webpack界说了两个进口文件一个main，一个preload，因为两者代码类型差不多，没有renderer的css或许html和静态资源，所以能够挑选放在一个webpack打包构建，而且需要在main引证preload的地方进行判别是否现已打包完结的，经过app.isPackaged判别是否运用现已打包，来挑选途径，这儿能够检查源码

webPreferences: {
  preload: app.isPackaged
    ? path.join(__dirname, 'preload.js')
    : path.join(__dirname, '../../.erb/dll/preload.js'),
},

.erb/dll/preload.js途径下便是dev开发环境下preload经webpack输入的途径，这儿是源码

脚手架部分依靠包

BundleAnalyzerPlugin 打包剖析
jest 测验
detect-port 检查端口
eslint 语法检查
@pmmmwh/react-refresh-webpack-plugin 用于为 React 组件启用“快速改写”（也称为热重载）
concurrently 同步运转command
electron-builder 打包electron运用
husky git钩子

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

窥探Electron React Boilerplate，熟悉搭建Electron开发环境

相关技能结构简介