基于react-scripts的小改造，让其支持antd及less
基于react-scripts的小改造。
- 将默认端口号改为3001
- 支持less
- 支持scss
- 支持装饰器（注解）
- 在index.js中默认引入antd-css-rewrite模块。webpack配置中集成antd css动态加载
- prod环境生成持久缓存的verdor.min.js
- prod环境去掉sourceMap
- prod环境js代码中删除console.log、console.info、console.dir，保留warning及error
- 支持react组件热更新
- 正式环境移除propTypes
- 在yarn build时，拷贝public目录里面的内容时会过滤data文件夹，通常这个里面是放mock数据的。
- 添加babel-runtime按需加载，解决不支持es6 7的语法糖，然而如果要解决API层面的，建议自己去引入“core-js”里面的模块。
- 默认生成apps.config.js文件，用来配置多入口、alias配置以及webpack分析器的开关，譬如：
``js
module.exports = {
// 多入口配置
entryList: [
{
name: "index",
path: "index.js",
templatePath: "index.html"
},
{
name: "login",
path: "login.js",
templatePath: "login.html"
},
...
],
// 起别名
alias: {
"Component": path.resolve(__dirname, 'src/component/')
},
// webpack分析器，默认关闭
analyzerWebpack: {
turn: "off", // 开启的话，属性为on
port: 11111
},
// 用来配置antd样式的less变量
theme: {
}
}
`
- 默认生成.env文件，提供两个配置：PORT（项目启动端口号）、myProxy（转发请求的URL），即可以在.env里面这样写：
`
PORT=3003
myProxy=http://localhost:6002
这个可以作为自己与团队的区分。比如说团队用的端口号是3000，但自己3000端口会有冲突，就可以在这个文件中改，包括代理UR也是一样。
需要注意的是这里的myProxy只能配置普通字符串，不支持多个规则json的形式。
- 默认生成myProxy.json文件（默认不提交）
用于复杂的代理配置，即多个规则rule/target。示例：
`
{
"/api/*": {
"target": "http://localhost:1521",
"secure": false,
"changeOrigin": true
},
"/apiTest/*": {
"target": "http://localhost:1521",
"secure": false,
"changeOrigin": true
}
}
- 在package.json中加入以下依赖：
`
{
"dependencies": {
"antd": "^2.7.4",
"axios": "^0.16.1",
"prop-types": "^15.5.10",
"antd-css-rewrite": "^1.0.0",
"babel-runtime": "^6.25.0",
"react-router": "^4.2.0",
"react-router-async-component": "^0.1.2"
}
}
默认react及react-dom是有的
主要用来解决最终项目的URL：http://xxx.com/xxx，xxx这个目录下，而非http://xxx.com。
像之前代账宝使用中，webpack.config.prod.js中，有这样的一段配置
`
{
publicPath: "/dzb"
}
我在这个配置中，未改，那么怎么实现上面的功能呢？很容易（读源码还是需要费点时间的），在package.json中新增homepage字段：
`
{
"homepage": "dzb"
}
这样写即可。
在js中可以通过process.env来取以下变量：
- NODE_ENV
- PUBLIC_URL
- URL_PREFIX
简单说一下URL_PREFIX。这个需求是这样的：
nginx不配转发，直接URL请求过去。当然这个服务器得配置允许跨域才行。
由于开发环境和build环境的URL_PREFIX是不一样的。所以需要写到package.json中，写法如下：
`
{
"build": "cross-env URL_PREFIX=http://www.a.com mior-react-scripts build"
}
多个环境就配置多个。。（cross-env，需要自己安装一下，yarn add cross-env -D）
譬如：
`
async componentDidMount() {
const {default: Util} = await import("./Util");
console.dir(Util);
}
如果用的是npm，则可以直接跳过这个。
用的是yarn，在命令中运行一下以下两条命令：
`
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g #sass二进制包
备注：有时候淘宝源并不是很稳定，可以全局装一下“yrm”，它可以管理yarn和npm的镜像资源，当淘宝源不行时，切换成其他的即可。
可以用它来改写antd中的less变量，比如：
`
{
"@body-background": "#000",
"@icon-url": "'字体地址'"
}
这里需要注意的是字体地址那里要加一个单引号，可以是线上字体库，也可以是本地字体库，具体可以参考local-iconfont，它会将这个地址去拼.svg等后缀。
本地字体库，在build时，如果有homepage，它生成的会有问题，即不会加上前缀。
这里我就不考虑处理了，我的建议是用阿里巴巴的Icon库生成在线字体库，而不是下载下来，好几个文件放在font目录下，没有这个必要。
`
create-react-app 要创建的目录名称 --scripts-version mior-react-scripts
- preact
`
'react': 'preact-compat',
'react-dom': 'preact-compat',
// Not necessary unless you consume a module using
'create-react-class': 'preact-compat/lib/create-react-class'
将这一段拷贝到apps.config.js的alias中，然后yarn add preact-compat -S即可。
- react-lite
`
'react': 'react-lite',
'react-dom': 'react-lite'
将这一段拷贝到apps.config.js的alias中，然后yarn add react-lite -S即可。
测试了一下，体积大概能减少至一半。
- inferno
`
'react': 'inferno-compat',
'react-dom': 'inferno-compat'
将这一段拷贝到apps.config.js的alias中，然后yarn add inferno inferno-compat -S`即可。
- 模板整合
- 目录规范及集成redux