官方文档：https://github.com/umijs/babel-plugin-import#usage

为什么需要这个插件？
在 antd 和 element 两个组件库中，index.js 分别是这样的：

// antd
export { default as Button } from './button';
export { default as Table } from './table';

// element
import Button from '../packages/button/index.js';
import Table from '../packages/table/index.js';
export default {
  Button,
  Table
}

antd 和 element 都是通过 ES6 module 的 export 来导出带有命名的各个组件，因此我们可以通过 import 导入单组件的 JS 文件，但是我们还需要手动引入组件的样式：

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

在上面的代码中，我们仅仅只需要一个 Button 组件，却把所有的样式都引入了，这明显是不合理的，会增加代码包的体积。

当然我们也可以只引入单个组件的样式：

import Button from 'antd/lib/button';
import 'antd/lib/button/style';

这样看上去没毛病，但是如果需要多个组件的时候，代码就显得不够优雅：

import { Affix, Avatar, Button, Rate } from 'antd';

import 'antd/lib/affix/style';
import 'antd/lib/avatar/style';
import 'antd/lib/button/style';
import 'antd/lib/rate/style';

这时候就应该思考一下，如何在引入组件的时候自动引入它的样式文件

这个插件做了什么？
简单来说，babel-plugin-import 就是解决了上面的问题，为组件库实现单组件按需加载并且自动引入其样式。

import { Button } from 'antd';

// 插件会自动将代码转换为按需引入的形式
import Button from 'antd/lib/button';
import 'antd/lib/button/style';

这个插件怎么用
简单来说只需关系三个参数即可。

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant', // 包名
      libraryDirectory: 'es', // 目录，默认 lib
      style: true // 是否引入 style
    }, 'vant']
  ]
};

babel-plugin-import 具体实现按需加载思路如下：将代码解析成AST，去AST里面找ImportDeclaration，若是source对应的value为是该插件配置的libraryName，那么就是要处理的，之后看该引用有没有真正使用，未使用直接删掉引用，使用了，删掉引用语句，借助于babel相应plugin重新插入引用语句，比如引用对应目录下的组件及样式。

第一步 依赖收集

babel-plubin-import 会在 ImportDeclaration 里将所有的 specifier 收集起来。

可以从这个 ImportDeclaration 语句中提取几个关键点：

• source.value: antd
• specifier.local.name: Button
• specifier.local.name: Rate

需要做的事情也很简单：

1. import 的包是不是 antd，也就是 libraryName
2. 把 Button 和 Rate 收集起来

 

来看代码：

ImportDeclaration(path, state) {
  const { node } = path;
  if (!node) return;
  // 代码里 import 的包名
  const { value } = node.source;
  // 配在插件 options 的包名
  const { libraryName } = this;
  // babel-type 工具函数
  const { types } = this;
  // 内部状态
  const pluginState = this.getPluginState(state);
  // 判断是不是需要使用该插件的包
  if (value === libraryName) {
    // node.specifiers 表示 import 了什么
    node.specifiers.forEach(spec => {
      // 判断是不是 ImportSpecifier 类型的节点，也就是是否是大括号的
      if (types.isImportSpecifier(spec)) {
        // 收集依赖
        // 也就是 pluginState.specified.Button = Button
        // local.name 是导入进来的别名，比如 import { Button as MyButton } from 'antd' 的 MyButton
        // imported.name 是真实导出的变量名
        pluginState.specified[spec.local.name] = spec.imported.name;
      } else {
        // ImportDefaultSpecifier 和 ImportNamespaceSpecifier
        pluginState.libraryObjs[spec.local.name] = true;
      }
    });
    pluginState.pathsToRemove.push(path);
  }
}

待 babel 遍历了所有的 ImportDeclaration 类型的节点之后，就收集好了依赖关系，下一步就是如何加载它们了。

第二步 判断是否使用

收集了依赖关系之后，得要判断一下这些 import 的变量是否被使用到了，我们这里说一种情况。

我们知道，JSX 最终是变成 React.createElement() 执行的：

ReactDOM.render(<Button>Hello</Button>);

      ↓ ↓ ↓ ↓ ↓ ↓

React.createElement(Button, null, "Hello");

没错，createElement 的第一个参数就是我们要找的东西，我们需要判断收集的依赖中是否有被 createElement 使用。

分析一下这行代码的 ast，很容易就找到这个节点：

 

来看代码：

CallExpression(path, state) {
  const { node } = path;
  const file = (path && path.hub && path.hub.file) || (state && state.file);
  // 方法调用者的 name
  const { name } = node.callee;
  // babel-type 工具函数
  const { types } = this;
  // 内部状态
  const pluginState = this.getPluginState(state);

  // 如果方法调用者是 Identifier 类型
  if (types.isIdentifier(node.callee)) {
    if (pluginState.specified[name]) {
      node.callee = this.importMethod(pluginState.specified[name], file, pluginState);
    }
  }

  // 遍历 arguments 找我们要的 specifier
  node.arguments = node.arguments.map(arg => {
    const { name: argName } = arg;
    if (
      pluginState.specified[argName] &&
      path.scope.hasBinding(argName) &&
      path.scope.getBinding(argName).path.type === 'ImportSpecifier'
    ) {
      // 找到 specifier，调用 importMethod 方法
      return this.importMethod(pluginState.specified[argName], file, pluginState);
    }
    return arg;
  });
}

除了 React.createElement(Button) 之外，还有 const btn = Button / [Button] ... 等多种情况会使用 Button，源码中都有对应的处理方法，感兴趣的可以自己看一下： babel-plugin-import/Plugin.js at master · umijs/babel-plugin-import · GitHub ，这里就不多说了。

第三步 生成引入代码（核心）

第一步和第二步主要的工作是找到需要被插件处理的依赖关系，比如：

import { Button, Rate } from 'antd';
ReactDOM.render(<Button>Hello</Button>);

Button 组件使用到了，Rate 在代码里未使用。所以插件要做的也只是自动引入 Button 的代码和样式即可。

我们先回顾一下，当我们 import 一个组件的时候，希望它能够：

import { Button } from 'antd';

      ↓ ↓ ↓ ↓ ↓ ↓

var _button = require('antd/lib/button');
require('antd/lib/button/style');

并且再回想一下插件的配置 options，只需要将 libraryDirectory 以及 style 等配置用上就完事了。

小朋友，你是否有几个问号？这里该如何让 babel 去修改代码并且生成一个新的 import 以及一个样式的 import 呢，不慌，看看代码就知道了：

import { addSideEffect, addDefault, addNamed } from '@babel/helper-module-imports';

importMethod(methodName, file, pluginState) {
  if (!pluginState.selectedMethods[methodName]) {
    // libraryDirectory：目录，默认 lib
    // style：是否引入样式
    const { style, libraryDirectory } = this;

    // 组件名转换规则
    // 优先级最高的是配了 camel2UnderlineComponentName：是否使用下划线作为连接符
    // camel2DashComponentName 为 true，会转换成小写字母，并且使用 - 作为连接符
    const transformedMethodName = this.camel2UnderlineComponentName
      ? transCamel(methodName, '_')
      : this.camel2DashComponentName
      ? transCamel(methodName, '-')
      : methodName;
    // 兼容 windows 路径
    // path.join('antd/lib/button') == 'antd/lib/button'
    const path = winPath(
      this.customName
        ? this.customName(transformedMethodName, file)
        : join(this.libraryName, libraryDirectory, transformedMethodName, this.fileName),
    );
    // 根据是否有导出 default 来判断使用哪种方法来生成 import 语句，默认为 true
    // addDefault(path, 'antd/lib/button', { nameHint: 'button' })
    // addNamed(path, 'button', 'antd/lib/button')
    pluginState.selectedMethods[methodName] = this.transformToDefaultImport
      ? addDefault(file.path, path, { nameHint: methodName })
      : addNamed(file.path, methodName, path);
    // 根据不同配置 import 样式
    if (this.customStyleName) {
      const stylePath = winPath(this.customStyleName(transformedMethodName));
      addSideEffect(file.path, `${stylePath}`);
    } else if (this.styleLibraryDirectory) {
      const stylePath = winPath(
        join(this.libraryName, this.styleLibraryDirectory, transformedMethodName, this.fileName),
      );
      addSideEffect(file.path, `${stylePath}`);
    } else if (style === true) {
      addSideEffect(file.path, `${path}/style`);
    } else if (style === 'css') {
      addSideEffect(file.path, `${path}/style/css`);
    } else if (typeof style === 'function') {
      const stylePath = style(path, file);
      if (stylePath) {
        addSideEffect(file.path, stylePath);
      }
    }
  }
  return { ...pluginState.selectedMethods[methodName] };
}

addSideEffect, addDefault 和 addNamed 是 @babel/helper-module-imports 的三个方法，作用都是创建一个 import 方法，具体表现是：

addSideEffect

addSideEffect(path, 'source');

      ↓ ↓ ↓ ↓ ↓ ↓

import "source"

addDefault

addDefault(path, 'source', { nameHint: "hintedName" })

      ↓ ↓ ↓ ↓ ↓ ↓

import hintedName from "source"

addNamed

addNamed(path, 'named', 'source', { nameHint: "hintedName" });

      ↓ ↓ ↓ ↓ ↓ ↓

import { named as _hintedName } from "source"

更多关于 @babel/helper-module-imports 见：@babel/helper-module-imports

总结

一起数个 1 2 3，babel-plugin-import 要做的事情也就做完了。

我们来总结一下，babel-plugin-import 和普遍的 babel 插件一样，会遍历代码的 ast，然后在 ast 上做了一些事情：

1. 收集依赖：找到 importDeclaration，分析出包 a 和依赖 b,c,d....，假如 a 和 libraryName 一致，就将 b,c,d... 在内部收集起来
2. 判断是否使用：在多种情况下（比如文中提到的 CallExpression）判断 收集到的 b,c,d... 是否在代码中被使用，如果有使用的，就调用 importMethod 生成新的 impport 语句
3. 生成引入代码：根据配置项生成代码和样式的 import 语句

不过有一些细节这里就没提到，比如如何删除旧的 import 等... 感兴趣的可以自行阅读源码哦。

看完一遍源码，是不是有发现，其实除了 antd 和 element 等大型组件库之外，任意的组件库都可以使用 babel-plugin-import 来实现按需加载和自动加载样式。

没错，比如我们常用的 lodash，也可以使用 babel-plugin-import 来加载它的各种方法，可以动手试一下。

核心支持类：

@babel/parser

它是Babel中使用的JavaScript解析器。默认启用ES2017，支持JSX，Flow，TypeScript,支持实验性的语言提议（至少是stage-0）

@babel/traverse

它实现了访问者模式，对AST进行遍历，插件可以通过它获取相应的AST节点，并对对应节点进行具体操作。

@babel/generator

它将AST转换成源代码，同时支持SourceMap

参考

简单实现 babel-plugin-import 插件 - axuebin - 博客园

用 babel-plugin 实现按需加载 - 知乎

庖丁解牛：最全babel-plugin-import源码详解 - 掘金