create-react-app 2.0中使用antd(eject)

早些时候CRA(create-react-app)升级到2.0.3的时候, react-app-rewired没有跟着升级, 导致项目无法启动, 于是乎直接eject 开始改造项目.

查看版本

> create-react-app --version
2.0.3

创建项目

create-react-app my-project
cd my-project
yarn eject # 输入 y

目前为止项目目录结构, 忽略node_modules这个黑洞

├── README.md
├── config
│   ├── env.js
│   ├── jest
│   │   ├── cssTransform.js
│   │   └── fileTransform.js
│   ├── paths.js
│   ├── webpack.config.js
│   └── webpackDevServer.config.js
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── scripts
│   ├── build.js
│   ├── start.js
│   └── test.js
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

安装依赖

yarn add antd
yarn add babel-plugin-import less less-loader @babel/plugin-proposal-decorators -D

CRA eject之后package.json里面没有区分devDependencies 和 dependencies, 但是不影响使用

因为antd是使用的less, CRA默认不支持, 所以需要改下默认的webpack配置, config/webpack.config.js

首先修改babel配置

个人习惯使用babelrc, 所以把babel-loader options中babelrc的值改为true, 增加.babelrc文件

{
  "presets": [
    "react-app"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "lib",
        "style": true
      },
      "ant"
    ],
    [
      "@babel/plugin-proposal-decorators", // 启用装饰器
      {
        "legacy": true
      }
    ]
  ]
}

参照默认的sass配置, 增加less配置

const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

在module>rules中添加规则

// sass rule
//...
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap
                },
                'less-loader',
                {
                  javascriptEnabled: true
                }
              ),
              sideEffects: true
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent
                },
                'less-loader',
                {
                  javascriptEnabled: true
                }
              )
            }
// file loader

至此基本项目虽然已经基本完成, 但是如果你是使用less版本比较高, 项目是无法运行的

参考 issue

需要改造getStyleLoaders函数, 增加第三个参数otherConfig, 就是上面代码中的 javascriptEnabled: true

const getStyleLoaders = (cssOptions, preProcessor, otherConfig) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: Object.assign({}, shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined)
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009'
              },
              stage: 3
            })
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap
        }
      }
    ].filter(Boolean);
    if (preProcessor) {
      loaders.push({
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
          ...otherConfig
        }
      });
    }
    return loaders;
  };

这样修改之后, 自定义主题modifyVars也可以写在otherConfig中, 一举两得, 不多赘述.

至此项目:ok_hand: