babel-plugin-import 引入 antd 报错及处理方法

如果你使用 Ant Design 作为前端 UI 框架，那么你可能会遇到「从 antd 中按需引入组件时报错」的问题。这个问题的根本原因是，Ant Design 的组件库是使用 ES6 Module 进行打包的，而在代码中通过 import 引入时，会将需要的组件单独打包成一个独立的 js 文件。但是在 webpack 中打包时，如果没有正确配置 babel-plugin-import 的话，就可能会导致引入 antd 组件的时候出现诸如 error Invalid attempt to spread non-iterable instance 之类的奇怪报错。

问题原因

这个问题的根本原因其实就在于如何正确使用 Ant Design 的 babel-plugin-import。我们先来看一下一个错误的使用方式：

import { Button } from 'antd';
import 'antd/dist/antd.css';

// ...

这种方式虽然可以顺利地将 antd 的组件引入到我们的代码当中，但在没有正确配置 babel-plugin-import 的情况下，就有可能出现各种奇怪的问题。原因是，引入的 antd 组件实际上是一个 ES6 Module，而 webpack 在打包时默认会将所有的 ES6 Module 用 Babel 转换成 CommonJS，也就是 require() 形式的模块。

因此，正确的使用方式应该是这样的：

import { Button } from 'antd/es';
import 'antd/dist/antd.css';

// ...

这样做的好处是，引入 antd 组件时，我们只需要通过 antd/es 这个模块路径来指定具体的组件，而不是通过整个 antd 库来引入。如果我们在使用 antd 时只需要用到其中的 Button 组件，那么使用 antd/es/button 这个路径来引入 Button 组件，就可以快速地将组件打包进我们的代码中，而不需要打包整个 antd 库。

然而，如果你粗心大意，仍然把 import { Button } from 'antd' 写成了 import { Button } from 'antd/es'，那么在打包时就会出现奇怪报错的情况。比如以下的代码片段：

import { Button } from 'antd/es';
const btnArr = [...Array(3)].map(() => <Button>click me</Button>);

// ...

在打包时，就有可能出现 "error Invalid attempt to spread non-iterable instance" 这个奇怪的错误。

这个问题的根本原因在于，配置 babel-plugin-import 这个插件时没有指定正确的 style、libraryName、libraryDirectory 等参数，导致无法正确地识别和转换 antd 的组件库。接下来我们就来看看具体的处理方法。

处理方法

1. 安装 babel-plugin-import 包

首先，我们需要安装 babel-plugin-import 这个包。

npm install babel-plugin-import -D

2. 配置 webpack.config.js 文件

接下来，我们需要在 webpack 配置文件中对 babel-loader 进行配置。这只需要在 rule 中添加一个 options 参数，将 babel-plugin-import 传递给 plugins 即可。同时，还需要添加 cacheDirectory 来开启 babel-loader 的缓存。

// www.javascriptcn.com code example
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          plugins: [
            ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]
          ]
        }
      }
    }
  ]
}

在这个配置中，我们指定了 libraryName 为 antd、libraryDirectory 为 es，style 为 css。这些参数的含义如下：

• libraryName: 把需要按需加载的 antd 的库的名称写在这里。这里是 antd
• libraryDirectory: antd 库的路径，这里是 es
• style: 指定按需加载 antd 的样式，选项有 css 和 less

3. 使用按需引入

最后，要确保在代码中正确地按需引入 Antd 的组件，而不是全部引入。比如，以上面的 Button 组件为例：

import { Button } from 'antd';
// or
import Button from 'antd/lib/button';
import 'antd/dist/antd.css';
// ...

这里的 import { Button } from 'antd' 会自动照着我们在 webpack 配置文件中指定的参数去做按需引入的处理。另外，还可以使用 import Button from 'antd/lib/button'，这样就只引入 Button 组件的代码，而不包括 Button 组件的样式。

结语

通过上面的步骤，我们就可以正确地引入 antd 组件库并按需加载组件了。如果你在使用 antd 过程中还有其他问题，可以参考 Ant Design 官网 或者前往 GitHub 寻求帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d09fe6e46428fe9edd8ef1