模板项目搭建

create-react-app 创建项目, npm run eject 弹出配置
替换eslint 规则为 airbnb

安装依赖
https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb

增加配置文件 .eslintrc.js
文件内容:

module.exports = {
    "parser": "babel-eslint",
    "extends": "airbnb",
    "env": {
        "browser": true
    }
};

删除package.json中 eslintConfig 配置

增加组件热更新
-安装依赖
https://github.com/gaearon/react-hot-loader/

修改配置
https://github.com/gaearon/react-hot-loader/tree/master/docs#webpack-2

增加babel独立配置文件 .babelrc
文件内容:

{
  "presets": [
  "react-app"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

删除package.json中 babel 配置

增加 Ant Design for React

npm install antd
增加按需引用插件 babel-plugin-import
https://github.com/ant-design/babel-plugin-import
修改.babelrc 配置, 增加插件配置
```
"plugins": [
    ["import", {
      "libraryName": "antd",
      "style": true  // or "css"
    }]
  ]
```

增加less支持, 主要是为了antd 的定制主题+按需加载

使用社区方案

https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f

安装 less-vars-to-js , 把less变量引入到 less-loader 中做变量替换
npm install less-vars-to-js --save-dev
安装 less 与 less-loader
npm install less less-loader --save-dev

在根目录新建文件 ant-theme-vars.less
内容为替换主题的变量(例如):

// Available theme variables can be found in
// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

@primary-color: #eec988; //<-- our first ant theme override!

在config目录新建文件: antd.theme.js, 内容如下:

const path = require('path');
const fs = require('fs');
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(process.cwd(), './ant-theme-vars.less'), 'utf8'));

module.exports = themeVariables;

修改config/webpack.config.dev.js 和 config/webpack.config.prod.js, css加载部分配置

test: /\.(css|less)$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 2,
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
          {
            loader: require.resolve("less-loader"),
            options: {
              "modifyVars": require('./antd.theme'),
            },
          },
        ],

增加 styled-components, 作为 css-in-js 方案

安装
npm install --save styled-components
安装babel插件
npm install --save-dev babel-plugin-styled-components
配置babel, 修改 .babelrc, 增加配置项:
```
"plugins": ["babel-plugin-styled-components", {
    "displayName": true
  }]
```
安装webStrom高亮插件,要求 webStrom 2017.2 以上版本
https://github.com/styled-components/webstorm-styled-components

add flow

转换为propTypes可以在运行时检查props类型是否正确, 注意有个坑.
需要写 class x {props: T; } 和 flow 的语法(class x<T>)不一致 (升级一下 eslint-plugin-react 应该可以解决)

为 flow 本身的语法增加 eslint 代码检查, eslint-plugin-flowtype

eslint + prettier, webStrom 集成 prettier
debugger in IDE
已增加插件 webpack-dashboard/plugin 推荐使用 electron-webpack-dashboard

// TODO 打包优化, common-chunk(公共代码部分长期缓存), bundle分析, 各种webpack插件的使用
// 发布部署方案

模板项目搭建

推荐阅读更多精彩内容