create-react-app工具两种按需引入antd组件的方式

create-react-app是react官方提供的快速搭建react项目的脚手架工具，它的安装和使用都非常方便，在命令行工具执行以下命令即可完成create-react-app的安装：

1	npm install -g create-react-app

然后执行以下命令即可创建一个react项目：

1	create-react-app helloworld

初始化后的react项目目录结构如下图所示：然后执行npm start即可启动项目。antd是一个非常好用的框架，有时我们可能会需要在使用create-react-app创建的项目中使用它，但是如果把antd全局引入了的话，打包后的体积会特别大，所以比较好的方式是按需引入项目中需要使用的组件。如何实现按需引入呢？下面我介绍两种方式，其中一种是antd官方提供的方法，另一种则是执行npm run eject后在webpack配置文件中配置按需引入。

方式一

首先安装react-app-rewired：

1	npm install --save react-app-rewired

安装完后修改package.json文件里的配置：

"scripts": {
    -   "start": "react-scripts start",
    +   "start": "react-app-rewired start",
    -   "build": "react-scripts build",
    +   "build": "react-app-rewired build",
    -   "test": "react-scripts test",
    +   "test": "react-app-rewired test",
}

由于我们需要按需加载组件的代码和样式，所以还需要安装babel-plugin-import插件：

1	npm install --save babel-plugin-import

然后在项目根目录创建一个 config-overrides.js 将以下内容写入这个配置文件用于修改默认配置,：

const { injectBabelPlugin } = require('react-app-rewired');

 module.exports = function override(config, env) {
   config = injectBabelPlugin(
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
    config,
   );
   return config;
};

接下来重启一下项目，即可在组件中使用以来命令按需引入antd里面的组件：

1	import { Button } from 'antd' // 引入antd的Button组件

方式二

使用create-react-app创建好项目后，我们需要先执行npm run eject以让webpack的配置文件显示出来，这个过程是不可逆的，执行这个命令后，在项目的根目录下面会多一个config文件夹，里面存放的是webpack相关的配置文件：接下来需要对webpack.config.dev.js和webpack.config.prod.js两个文件做相同的修改：一个是babel-loader中的plugins增加对atnd的支持：

// Process application JS with Babel.
      // The preset includes JSX, Flow, and some ESnext features.
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {
          customize: require.resolve(
            'babel-preset-react-app/webpack-overrides'
          ),

          plugins: [
            [
              require.resolve('babel-plugin-named-asset-import'),
              {
                loaderMap: {
                  svg: {
                    ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
                  },
                },
              },
            ],
            ['import', [{ libraryName: "antd", style: true }]] // 新添加的一行
          ],
          // This is a feature of `babel-loader` for webpack (not Babel itself).
          // It enables caching results in ./node_modules/.cache/babel-loader/
          // directory for faster rebuilds.
          cacheDirectory: true,
          // Don't waste time on Gzipping the cache
          cacheCompression: false,
        },
      },

还有一点，同样也需要安装babel-plugin-import插件：

1	npm install --save babel-plugin-import

由于antd的样式是用less写的，所以还需要先安装less-loader，然后再修改webpack.config.dev.js和webpack.config.prod.js里的配置：

1	npm install --save less-loader

修改地方一(cssRegex)：

// style files regexes
const cssRegex = /\.css|less$/; // 添加|less
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

修改地方二（getStyleLoaders函数）：

// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: cssOptions,
    },
    {
      // Options for PostCSS as we reference these options twice
      // Adds vendor prefixing based on your specified browser support in
      // package.json
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebook/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          require('postcss-preset-env')({
            autoprefixer: {
              flexbox: 'no-2009',
            },
            stage: 3,
          }),
        ],
      },
    },
    {
      loader: require.resolve('less-loader')
    }, // 增加 less 的loader
  ];
  if (preProcessor) {
    loaders.push(require.resolve(preProcessor));
  }
  return loaders;
};

最后可以测试一下效果，修改一下App.js:

import React, { Component } from 'react';
import { Button } from 'antd';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <p>
            <Button type="primary">按钮</Button>
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

然后启动项目，可以看到效果：