基于 CRA 的项目模板

scripts

可用脚本：

yarn start: 启动 dev
yarn build: 打生产打包
yarn build:qa: 打包测试环境
yarn lint: 检查语法和样式
yarn cz: 提交代码
yarn cloc: 统计代码量

webpack 配置

采用craco来代替react-scrpits

husky

提供git的钩子，以便在git commit前做检查

"lint:js": "eslint --ext .js --ext .tsx --ext .jsx src/ --fix", // 使用eslint 检查语法
"lint:style": "prettier -c --write src",                        // 使用prettier检查格式
"lint": "concurrently yarn:lint:*",                             // 并行同时检查语法和格式

husky 安装husky之后先执行npx husky install或yarn husky install,来添加Git hooks 同时在package.json的scripts中添加"postinstall": "husky install"

使用npx husky add pre-commit "yarn lint"来添加钩子

上面命令意思是在pre-commit时，执行yarn lint命令

git-cz

使用commitizen来规范git commit message 该版本使用了git-cz

craco

设置了@这一个别名，指向src目录
添加less
添加less module
在每个 less 文件中自动引入全局变量src/styles/variables.less

env 环境变量

在yarn或者npm时，可以读取package.json中的内容(参考文章:package-json-values-are-accessible-in-npm-yarn-scripts)

将token的 key 存在package.json中，从.env中读取

在/src/config下会根据当前的环境变量获取对应的值目前有.env.development、.env.qa和.env.production分别对应开发、测试、生产三个环境当有新环境需要打包时，使用dotenv -e .env.xxx指定使用当.env即可

Error Boundary(错误边界)

在/src/components/error-boundary对错误进行捕获，如果发生错误，则显示错误页但是以下几类无法捕获

事件处理
异步
服务端渲染
自身异常参考:官方文档

全局 Loading

由于antd暂时没有提供以服务对方式调用spin，因此自己写了一个在public/index.html中实现了一个loadingMask和一个loading.gif 默认display:none,当loading时将display设为flex即可居中显示

在utils/loading.js中暴露了showLoading和hideLoading两个方法，可以直接使用

特性

使用normalize.css来重置样式
使用core-js和react-app-polyfill来支持 IE 浏览器
使用classnames来进行classname管理

lz82 / cra-js-redux-template