From 736fedcbfba12e196532768198e93b1835c37a9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= Date: Sun, 15 Aug 2021 22:13:02 +0800 Subject: [PATCH] =?UTF-8?q?post:=E5=A2=9E=E5=8A=A0=E5=85=B3=E4=BA=8EElectr?= =?UTF-8?q?on=E5=BC=80=E5=8F=91=E7=9A=84=E6=96=87=E7=AB=A0=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/_posts/cra-template-electron.md | 47 +++++++++++++++++++ .../_posts/electron-with-react-typescript.md | 21 +++++++-- 2 files changed, 64 insertions(+), 4 deletions(-) create mode 100644 source/_posts/cra-template-electron.md diff --git a/source/_posts/cra-template-electron.md b/source/_posts/cra-template-electron.md new file mode 100644 index 0000000..6d5bd42 --- /dev/null +++ b/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应用时使用。 + +经常使用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应用本身也会自动重启。 \ No newline at end of file diff --git a/source/_posts/electron-with-react-typescript.md b/source/_posts/electron-with-react-typescript.md index 1809e3a..55cd648 100644 --- a/source/_posts/electron-with-react-typescript.md +++ b/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的安装。