1. create-react-app 創(chuàng)建項目, npm run eject 彈出配置

2. 替換eslint 規(guī)則為 airbnb

• 安裝依賴
  https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb

• 增加配置文件 .eslintrc.js
  文件內(nèi)容:

  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
  文件內(nèi)容:

  {
    "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 的定制主題+按需加載

• 使用社區(qū)方案
• 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
    內(nèi)容為替換主題的變量(例如):

    // 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, 內(nèi)容如下:

    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)

轉(zhuǎn)換為propTypes可以在運行時檢查props類型是否正確, 注意有個坑.
需要寫 class x {props: T; } 和 flow 的語法(class x<T>)不一致 (升級一下 eslint-plugin-react 應(yīng)該可以解決)

• 為 flow 本身的語法增加 eslint 代碼檢查, eslint-plugin-flowtype

8. eslint + prettier, webStrom 集成 prettier

9. debugger in IDE

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

// TODO 打包優(yōu)化, common-chunk(公共代碼部分長期緩存), bundle分析, 各種webpack插件的使用
// 發(fā)布部署方案