模板项目搭建

1. create-react-app 创建项目, npm run eject 弹出配置

2. 替换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 配置

3. 增加组件热更新
   -安装依赖
   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 配置

4. 增加 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"
      }]
    ]
  

5. 增加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'),
                },
              },
            ],
    

6. 增加 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

7. add flow

• create-react-app add flow
• (optional) Convert Flow React props annotation to PropTypes
• Remove unnecessary React propTypes from the production build)

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

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

8. eslint + prettier, webStrom 集成 prettier

9. debugger in IDE

10. 已增加插件 webpack-dashboard/plugin 推荐使用 electron-webpack-dashboard

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