react项目前端脚手架

feature

typescript重构.
将storeProp改名为extendStore.
目前路径别名有三个配置需要定义: webpack, tsconfg, jest，改为一处统一定义.
重构extendStore, 在rest中复用setter.
重构extendStore/list, 将fetchList从search中取值，改为接收查询参数的函数。
重构router, store, tsconfig的自动生成功能，并添加监听文件修改。
重构大部分模块的export，使用named export代替default 参考typescript-export-vs-default-export
紧跟最新稳定版本的react,react-dom,react-router,mobx,webpack。
使用eslint-config-airbnb检查js文件。
使用less。
使用stylelint-config-recommended，stylelint-config-property-sort-order-smacss检查less语法。
文件与目录使用单数英文单词命名。
build文件夹存放代码构建脚本。
build/template文件夹存放一些项目配置模板文件。
最终发布文件放到dist文件夹。
使用mockServer文件夹存放作为后端服务提供开发伪数据。
~~使用axios获取接口数据。~~
使用fxios (fetch的简单封装)获取接口数据。 axios无法处理返回302的redirect状态，所以还是用fetch 参考🏁 参考🏁 axios的maxRedirects: 0只在nodejs端有用，浏览器没用
当前项目与后端的约定配置，比如返回状态码为200则为成功，返回分页数据格式等，需要在src/tool/fxios中配置。
QueryForm使用时注意如果里面有Datepicker组件，若为时间格式则需要该表单项以Time结尾，否则不能正确识别为时间格式。 QueryForm具体使用文档见代码注释。
使用extendStore修饰mobx store，在运行时生成一些store属性与方法，简化大量方法定义。具体每个修饰方法说明，见代码注释与extendStore文档。
开发模式webpack-dev-server使用3000端口，模拟后端数据的mockServer使用3009端口。 webpack配置使用ts。 mockServer配置文件在mockServer/config.js。
在本地模拟接口数据开发环境中，直接使用请求路径的url在mockServer/fixture文件夹中写入对应的模拟数据即可生成响应。
所有接口地址都在src/api/index.js中配置，避免接口到处硬编码。
添加基于antd的样式主题. 每个主题文件会占1M以上的空间，如果不需要切换主题，可以在component/Header中移除Theme组件。

例如接口配置 src/api/index.js

{
  me: 'user/me',
  ...
}

在本地开发模式中，在mockServer/fixture/me.json的结果将自动返回到该接口的请求结果中。也可根据逻辑写成mockerServer/fixture/me.js，里面的内容可根据请求动态返回。

项目所用配置文件在src/config.js，详见代码注释。
src/page文件夹内的每个组件都会自动映射为路由。例如src/page/User组件会映射为/user路由。如需要配置特殊路由，在build/template/route.ejs中单独配置。 src/route.tsx每次启动项目会从文件build/template/route.ejs自动生成覆盖，所以不要编辑它。
src/store文件夹中的文件会自动挂载为组件的mobx store。例如src/store/user.js，在组件内即this.props.store.user。
参考mobx最佳实践
add commitizen and commitlint for git commit format
add serviceWorker support, copy code from create-react-app example. in development env, you can generate self signed certificates 参考🏁
```
openssl genrsa -out server-key.pem 1024
openssl req -new -key server-key.pem -out server-csr.pem
openssl x509 -req -in server-csr.pem -signkey server-key.pem -out server-cert.pem
```
and add ssl support to your local nginx conf file, see nginx conf example

then start chrome in command line with ignore ignore certificates error param.
```
google-chrome --unsafely-treat-insecure-origin-as-secure=https://dist.jd.m --ignore-certificate-errors
```
see localhost to test your serviceWorker.

常用命令

本地模拟接口开发模式

yarn start

最初没有后端接口支持时，使用本地nodejs启动express提供后端接口。

后端接口联调阶段若有后端提供swiagger接口，可修改webpack.config.ts中的proxyTargets变量remote属性，指向后端接口域名。然后用命令启动开发模式。

yarn dev:remote

此时基本不会再用本地模拟接口，可将package.json中的script中的start改为 "start": "yarn run dev:remote | yarn run server", 继续用 yarn start来开发项目。

打包生成测试环境代码，登录环境为sso

yarn build:test

发布到生产环境。

yarn build:production
// 或yarn production 相同

单元测试文件夹__test__，运行单元测试用例参考jest文档

yarn test

单元测试代码覆盖率调用jest生成coverage文件夹，查看里面的index.html。

yarn coverage

e2e使用puppeteer

由于puppeteer在每次安装都会下载一个Chromium非常耗时，实际使用的是puppeteer-core。下载后需要在jest-puppeteer.config.js文件中，修改executablePath对应当前系统的chrome执行路径后才能运行。

yarn e2e

使用changelog脚本自动生成CHANGELOG.md

yarn changelog

rmbf2e/react-mobx-scaffold

react项目前端脚手架

feature

常用命令