React Admin Template

🎉 A magical react admin template supporting electron.

个人自用 React 项目开发模板，同时集成 Electron 支持。默认使用TypeScript开发，若使用JavaScript开发，需注意tsconfig.json中allowJs配置。本分支作为项目快速启动模板，不会过多提交代码，只提供基础模板。

注意事项

1. 本项目模板同时引入了Redux和Mobx的演示，仅提供开始前的选择演示，所以切忌二者同时使用。
2. 删除其中一个很容易，在src/app.tsx中MobxProvider和ReduxProvider二选一即可
3. 路由权限数据使用了 redux 的状态，根据选择修改，入口在src/layout/index.tsx
4. 演示页面文件在src/pages/store-test目录，对应路由在src/router/tests.tsx文件，直接删除即可
5. 然后选择性删除src/mobx目录或src/redux目录。
6. 若选择Mobx，请将@reduxjs/toolkit、react-redux、reselect卸载，反之请将mobx、mobx-react卸载
7. 标签页组件TabsBar(src/layout/base-layout/components/tabs-bar)依赖了redux的状态，使用mobx请自行改造

一. 本地开发

# 安装依赖
> yarn # npm install

# 启动前会构建dll
> yarn start # npm run start

# 启动不会构建dll，之前存在就用
> yarn dev # npm run dev

# 启动electron开发环境
> yarn electron # npm run electron

二. 代码风格

本项目对代码风格有一定的要求，具体参考.eslintrc.js、.stylelintrc.js、.prettierrc.js文件配置。

三. 提交规范

项目提交前会对commit message进行检查，不符合规范提交会被拒绝。commit message格式如下：

> type(scope?): subject // scope可选

提交的 type 可选值如下:

['build', 'ci', 'chore', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test'];

四. 打包构建

为了互不影响，web代码打包再dist目录，electron代码打包在build目录，其中渲染进程代码全部在build/render目录。

环境变量说明

一些BuiltIns、Plugins、Loader的环境变量默认值是process.env.NODE_ENV，但是自家 CI 没得商量只传递一个环境变量NODE_ENV且会超出development、test、production范围，同时为了变量扩展，此项目BABEL_ENV、NODE_ENV已固定为development、production。也就是说无论NODE_ENV传递什么值都会在赋值给BUILD_ENV后被强制矫正为development或production。

所以本模板中请使用BUILD_ENV来区分环境，process.env.NODE_ENV不再使用

打包命令

本模板内置electron打包支持。

# web打包，默认生产环境
> yarn build # npm run build

# electron打包，默认生产环境
> yarn package # npm run package

# electron打包，仅打包
> yarn package:only # npm run package:only

五. 关于 Electron

本模板内置了electron相关功能，为了方便不需要electron的项项目并没有将主进程代码和渲染进程代码放置一起。目录结构根据需要可以轻松自行调整，只需调整.scripts/config/paths.js文件相关变量即可轻松搞定。

不需要electron

如果不需要electron又不想其留在项目中，操作如下:

1. 删除tsconfig.json中include数组的main目录配置和paths对象中的~/*
2. 删除.scripts/config/index.js、.scripts/config/paths.js中 electron 相关目录配置，有注释
3. 删除.scripts/electron文件夹`
4. 删除public/main目录
5. 删除package.json文件中scripts对象的electron相关命令
6. 删除根目录下electron.config.js文件
7. 卸载package.json文件中的依赖
   1. electron
   2. node-loader
   3. electron-debug
   4. electron-devtools-installer
   5. @types/electron-devtools-installer
   6. electron-builder

> yarn remove electron node-loader electron-debug electron-devtools-installer @types/electron-devtools-installer electron-builder electron-updater electron-log

# or

> npm uninstall electron node-loader electron-debug electron-devtools-installer @types/electron-devtools-installer electron-builder electron-updater electron-log

8. done

以上操作经实践暂无问题，如有问题请先查看控制台错误输出。

需要electron且需适当改造

如果希望将主进程、渲染进程放置于同一目录(以src为例，渲染进程代码src/render，主进程代码(src/main)，操作如下:

1. 删除tsconfig.json中include数组的main目录配置，将src替换为src/render
2. 将tsconfig.json中的paths: { "~/*": ["./main/*"], "@/*": ["./src/*"] }对象修改为paths: { "~/*": ["./src/main/*"], "@/*": ["./src/render/*"] }
3. src目录中新建render子目录，将src目录中原有所有文件移动到src/render目录
4. 将main目录移动到src目录与render目录同级
5. 修改.scripts/config/paths.js相关配置，将src修改为src/render，将main修改为src/main
6. 修改electron.config.js文件相关目录指向
7. done

TODO

• 主进程代码修改后如何才能像渲染进程代码一样热加载，而不是每次重新启动程序
• 添加 electron 安装包更新功能