blog/source/_posts/cra-template-electron.md
2021-08-15 22:16:33 +08:00

3.3 KiB
Raw Blame History

title date tags categories keywords
推荐两个用于Create React App的Electron应用模板 2021-08-15 21:31:29
前端
Javascript
Typescript
Electron
CRA
Create React App
React
前端
React
前端,React,Create React App,Electron

Electron是前端开进桌面开发的主要工具很多前端技术栈都提供了将自身融入Electron框架运行的能力。但是对于React来说需要自定义的东西太多了在开始桌面应用的开发时十分的不方便。这里根据在实际项目工作中的经验搭建了两款使用React开发Electron应用的模板共大家在构架Electron应用时使用。

经常使用React开发前端应用的IT人应该都对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。在使用的时候可以直接使用以下命令来创建项目。

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。在使用的时候可以直接使用以下命令来创建项目。

npx create-react-app my-app --template simple-electron

在这个模板中,主线程的代码不需要编译,所以主线程代码就直接位于main目录了,并且在打包的时候会直接被置入发布包中。

这两个模板都可以直接使用npm start来启动Electron应用的调试并且在React应用发生变化的时候会自动加载主线程代码发生变动的时候Electron应用本身也会自动重启。