47 lines
3.3 KiB
Markdown
47 lines
3.3 KiB
Markdown
---
|
||
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应用本身也会自动重启。 |