create-react-app采坑记

      最近在用react全家桶做一个管理后台的项目，项目采用的create-react-app脚手架，用的ui框架是ant design与ant design pro。中间碰到了一些问题，在这里总结一下。

---

1.添加less支持，css module配置 antd配置

项目中添加less less-loader antd

yarn add --dev less less-loader
yarn add antd ant-design-pro

修改webpack.config.dev.js webpack.config.prod.js

{
            test: /\.(css|less)$/,
            exclude: /node_modules|antd\.css/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  // 改动
                  modules: true,   // 新增对css modules的支持
                  localIdentName: '[name]__[local]__[hash:base64:5]', //
                },
              },
              {
                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'), // compiles Less to CSS
                options: {
                  javascriptEnabled: true,
                },
              },
            ],
          },
          {
            test: /\.less$/,
            include: /node_modules|antd\.css/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                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'), // compiles Less to CSS
                options: {
                  javascriptEnabled: true,
                },
              },
            ],
          },
          {
            test: /\.css$/,
            include: /node_modules|antd\.css/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                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',
                    }),
                  ],
                },
              },
            ],
          },

2.生产环境去除console

修改webpack.config.prod.js

new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_debugger: true,
        drop_console: true,
        // Disabled because of an issue with Uglify breaking seemingly valid code:
        // https://github.com/facebookincubator/create-react-app/issues/2376
        // Pending further investigation:
        // https://github.com/mishoo/UglifyJS2/issues/2011
        comparisons: false,
      },
      ......
    }),

3.生产环境去除sourcemap

修改webpack.config.prod.js

// devtool: shouldUseSourceMap ? 'source-map' : false,
  devtool: false,

4.添加装饰器插件transform-decorators-legacy

安装 babel-plugin-transform-decorators-legacy

yarn add --dev babel-plugin-transform-decorators-legacy

修改package.json中plugins

"plugins": [
      "transform-decorators-legacy",
      ....
    ]

5.添加插件 webpack-bundle-analyzer

安装 webpack-bundle-analyzer

yarn add --dev webpack-bundle-analyzer

修改 webpack.config.prod.js

const BundleAnalyzerPlugin = require(
  'webpack-bundle-analyzer').BundleAnalyzerPlugin

plugins:[
    ....,
    new BundleAnalyzerPlugin(),
]

6.项目中添加redux-logger

安装redux-logger

yarn add redux-logger

项目中使用 configureStore.js

import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import rootReducer from '../reducers'

const debug = process.env.NODE_ENV !== 'production'

const middleware = [
  debug && logger,
].filter(Boolean)

const createStoreWithMiddleware = applyMiddleware(...middleware)(createStore)

export default function configureStore (initialState) {
  const store = createStoreWithMiddleware(rootReducer, initialState,
    window.devToolsExtension ? window.devToolsExtension() : undefined)
  return store
}

7.项目中添加nprogress进度条

安装nprogress

yarn add nprogress

项目中使用 App.js

import NProgress from 'nprogress'

class App extends Component {
  componentWillUpdate () {
    NProgress.start()
  }

  componentDidUpdate () {
    NProgress.done()
  }

  render () {
    return (
      <div className="App">
        <Switch>
          ........
        </Switch>
      </div>
    )
  }
}