electron-typescript-react-boilerplate
PUDDING
PUDDING 是一款基于 React + TypeScript + Webpack 搭建的 Electron 客户端脚手架。
+
特性
- ⚡️ hmr、electron自动重载
- 🛡 TypeScript 开发支持
- 🍭 prettier、eslint 集成
- 🛠 react-devtool调试工具集成
- 📚 基于dumi的可视化文档集成
- 📦 完善的 webpack 打包配置
- 🖥 支持打包 win/mac 安装包
- 💥 客户端热更新功能支持
- ✨ commitizen规范代码提交
- ...
基本信息
| 跨平台桌面客户端框架 | HTML+CSS+JS 开发 | 前端工程化 |
|---|---|---|
Electron |
CSS-IN-JS 库：Styled-Components |
代码编译工具：Babel |
JS MV* 框架：React |
模块打包工具：Webpack |
|
页面 UI 组件库：Ant Design |
文档直出工具：Dumi |
|
JS 语言增强：TypeScript |
代码格式规范工具：Prettier |
Electron 内代码运行环境
 Chromium |
 Node |
|---|---|
| v85.0.4183.121 | v12.16.3 |
目录结构
app目录即管理源代码及进行业务开发的目录
build目录管理了整个项目的 Webpack 构建相关文件 以及 启动开发服务、进行打包、执行发布的 npm scripts 脚本
docs目录负责管理项目文档的所有内容
release目录存放执行发布命令执行后输出的最终客户端产物
下列通过非标准的矩形树图的形式展示了整个项目结构的俯瞰图：
构建链路流程如下图：
快速上手
环境
PUDDING的运行和启动依赖 Node 运行环境，需要提前安装 node 并确保 node 版本是 12.16.3 或以上。
克隆仓库
git clone https://github.com/hx-dl/electron-ts-react-boilerplate.git project-name
安装依赖
yarn
启动开发服务
# cd 到项目跟目录下
yarn start启动文档服务
yarn doc代码打包
# 打包产物会输出到 app/dist 目录
yarn build生成客户端
# 客户端安装包会输出到 release/installer 目录
# 热更新资源包位于 release/update 目录
yarn release