mior-react-scripts

项目说明

基于react-scripts的小改造。

• 将默认端口号改为3001
• 支持less
• 支持装饰器（注解）
• 在index.js中默认引入antd-css-rewrite模块。webpack配置中集成antd css动态加载
• prod环境生成持久缓存的verdor.min.js
• prod环境去掉sourceMap
• 支持react组件热更新
• 正式环境移除propTypes
• 默认生成apps.config.js文件，用来配置多入口、alias配置以及在打包前要做的一些工作。

module.exports = {
    // 打包之前额外要做的工作，主要是在prod中
    beforePack: function(webpack, fs) {

    },
    // 多入口配置
    entryList: [
        {
            name: "index",
            path: "index.js",
            templatePath: "index.html"
        },
        {
            name: "login",
            path: "login.js",
            templatePath: "login.html"
        },
        ...
    ],
    // 起别名
    alias: {
        "Component": path.resolve(__dirname, 'src/component/')
    }
}    

• 默认生成.env文件，提供三个配置：PORT（项目启动端口号）、myProxy（转发请求的URL）、TITLE（项目title，会改写index.html中的title），即可以在.env里面这样写：

PORT=3003
myProxy=http://localhost:6002
TITLE=代账宝

• 在package.json中加入以下依赖：

{
    "dependencies": {
        "antd": "^2.7.4",
        "axios": "^0.16.1",
        "prop-types": "^15.5.10",
        "antd-css-rewrite": "^1.0.0",
        "react-router": "^3.0.2"
    }
}

默认react及react-dom是有的

publicPath说明

主要用来解决最终项目的URL：http://xxx.com/xxx，xxx这个目录下，而非http://xxx.com。

像之前代账宝使用中，webpack.config.prod.js中，有这样的一段配置

{
    publicPath: "/dzb"
}

我在这个配置中，未改，那么怎么实现上面的功能呢？很容易（读源码还是需要费点时间的），在package.json中新增homepage字段：

{
    "homepage": "dzb"
}

这样写即可。

使用

create-react-app 要创建的目录名称 --scripts-version mior-react-scripts

后续工作

• 模板整合
• 目录规范及集成redux