post:增加关于Electron开发的文章。

source/_posts/cra-template-electron.md

@@ -0,0 +1,47 @@
+---
+title: 推荐两个用于Create React App的Electron应用模板
+date: 2021-08-15 21:31:29
+tags:
+  - 前端
+  - Javascript
+  - Typescript
+  - Electron
+  - CRA
+  - Create React App
+  - React
+categories:
+  - - 前端
+    - React
+keywords: '前端,React,Create React App,Electron'
+---
+Electron是前端开进桌面开发的主要工具，很多前端技术栈都提供了将自身融入Electron框架运行的能力。但是对于React来说，需要自定义的东西太多了，开开始桌面应用的开发时，十分的不方便。这里根据在实际项目工作中的经验，搭建了两款使用React开发Electron应用的模板，共大家在构架Electron应用时使用。<!-- more -->
+
+经常使用React开发前端应用的IT人应该都对[electron-react-boilerplate](https://github.com/electron-react-boilerplate/electron-react-boilerplate)不会陌生。这是一个已经完成了配置的使用React开发Electron应用的模版项目，只需要直接`git clone`下来再稍微改一改就可以投入项目的开发了。但是这种方式对于一些有框架洁癖的人来说，就十分的不爽了，总会有一种没有把控全局的感觉。
+
+为了解决这个问题，笔者根据实际项目中的项目构建经验，利用React的项目构建工具Create React App，搭建了两款用于开发Electron应用的模板。这两款模版的功能基本上一模一样，只是一款是采用Typescript编写Renderer Process和Main Process的，另一款是完全采用Javascript的。
+
+## cra-template-typescript-electron
+
+说到Typescript，应该大部分已经接触过的IT人都会发现已经离不开它了，所以这里推荐的第一款模版就是使用Typescript来编写Electron渲染线程和主线程的模板。
+
+模板地址为[cra-template-typescript-electron](https://www.npmjs.com/package/cra-template-typescript-electron)。在使用的时候可以直接使用以下命令来创建项目。
+
+```bash
+npx create-react-app my-app --template typescript-electron
+```
+
+由于主线程也是采用Typescript编写的，所以主线程的代码也是需要经过编译的。为了保证编译后代码输出的纯粹，所以主线程代码被放置在了`src-main`目录中。整个模板中没有Eject配置，所以所有的特殊配置都可以利用Customize-CRA来修改。对于Electron应用的打包发表，则可以依靠模版中已经放置好的Electron Builder来完成，但是需要注意的是，在使用Electron Builder之前需要在`package.json`中先完成所有需要的配置。
+
+## cra-template-simple-electron
+
+相对的，使用Javascript来编写Electron渲染线程和主线程代码的模板名称为`cra-template-simple-electron`。
+
+模板地址为[cra-template-simple-electron](https://www.npmjs.com/package/cra-template-simple-electron)。在使用的时候可以直接使用以下命令来创建项目。
+
+```bash
+npx create-react-app my-app --template simple-electron
+```
+
+在这个模板中，主线程的代码不需要编译，所以主线程代码就直接位于`main`目录了，并且在打包的时候会直接被置入发布包中。
+
+这两个模板都可以直接使用`npm start`来启动Electron应用的调试，并且在React应用发生变化的时候会自动加载，主线程代码发生变动的时候，Electron应用本身也会自动重启。

source/_posts/electron-with-react-typescript.md

@@ -196,21 +196,34 @@ npm install -D electronmon
 
 ### 各种`require() is not defined`
 
-在DevTools上出现这种提示，往往是因为`BrowserWindow`创建的时候`webPreferens`配置给的不正确。因为React APP和基于Typescript的主线程都需要`require()`，所以`webPreferences`的配置需要参考以下示例。
+在DevTools上出现这种提示，往往是因为`BrowserWindow`创建的时候`webPreferences`配置给的不正确。因为React APP和基于Typescript的主线程都需要`require()`，所以`webPreferences`的配置需要参考以下示例。
 
 ```js
 webPreferences: {
-    // 启动nodeIntegration是为了在渲染线程中使用require
+    // 启动nodeIntegration是为了在渲染线程中使用Node.js的API
     nodeIntegration: true,
     nodeIntegrationInWorker: true,
     nodeIntegrationInSubFrames: true,
     enableRemoteModule: true,
-    // 当开启contextIsolation以后，preload.js中就不能使用require了。
-    // 但是如何即能使用preload.js，又能够开启contextIsolation以使用contextBridge功能，还有待于进一步研究。
     contextIsolation: false
 }
 ```
 
+另外还有一种情况，就是之前用于`customize-cra`的`config-overrides.js`中把Webpack的编译目标设为了`electron-renderer`，这就导致了Webpack在不支持`require`的文件中也同样使用了`require`，从而导致运行的时候报出了`require() is not defined`错误。这也是在计划使用`preload.js`，开启了`contextIsolation`以后出现的错误的根本原因。所以如果计划使用Electron推荐的安全策略，采用`preload.js`控制对于底层API的暴露，那么可以去掉`config-overrides.js`中Webpack的`target`设置，然后将`WebPerferences`的配置改为以下形式。
+
+```js
+webPerferences: {
+    // 取消在Renderer线程中使用Node.js API的能力
+    nodeIntegration: false,
+    // 对于PWA中的Service Worker可以适当放开，也可以继续限制其对于底层API的使用
+    nodeIntegrationInWorker: true,
+    nodeIntegrationInSubFrames: false,
+    enableRemoteModule: false,
+    contextInsolation: true,
+    preload: path.join(__dirname, 'preload.js')
+}
+```
+
 ### 出现了`Electron failed to install correctly`
 
 这种情况一般在使用淘宝的npm镜像的时候容易发生，而发生这种情况的主要原因是Electron没有完全安装。要解决这个问题可以直接安装一个辅助库来完成Electron的安装。