一分钟搭建一个 React 的 electron 应用

electron 是一个使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序, 我们可以使用 React 的技术栈来进行快速开发一个桌面端的程序， 它可以支持 Linux, Window, Mac 等多个平台.

技术栈

• React 18.0.0 +
• React Router Dom 6.3.0 +
• styled-components 5.3.5 +
• @weblif/fastpack 1.11.1-canary +

创建项目

我们可以快速创建创建一个 ms-native-app-template 的项目. 使用以下命令进行创建

# 在命令行中输入以下命令


npx @weblif/cli
# or
git clone https://github.com/Web-Lif/ms-native-app-template.git

有以下优点

• 循序渐进进行加载，所以第一次加载的时候非常的快
• 编写渲染的时候，自动加载热部署
• 打包无 node_modules 这种大体积的项目，项目文件裁剪的非常小

如下图所示

选择 ms-native-app-template 按回车，等待项目进行创建, 大概2分钟左右，等待项目创建完毕, 创建好的项目结构如下

项目结构

D:.
├─.github             # github 的流水线配置
│  └─workflows 
├─.scripts            # 一些构建的脚本信息
├─native              # 这是本地 electron 的main进程
│  ├─.config
│  └─controllers
└─src                 # 这个是 electron 的渲染进程的代码
    ├─components
    │  └─styles       # 这个是样式信息
    │      └─assets
    ├─layouts         # 这个是布局页面
    ├─pages           # 这个是页面信息
    └─utils

安装依赖

# 使用以下应用进行安装依赖
npm install --force 

启动应用

执行

npm run start

在等待安装完毕后，执行 npm run start 命令即可启动项目，效果如下

效果如下

这样就创建了一个简单的 React electron 项目, 基于 Webpack 的打包.