经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » JavaScript » 查看文章
简单实现 babel-plugin-import 插件
来源：cnblogs　　作者：axuebin　　时间：2021/4/19 8:56:29　　对本文有异议

前言

平时在使用 antd、element 等组件库的时候，都会使用到一个 Babel 插件：babel-plugin-import，这篇文章通过例子和分析源码简单说一下这个插件做了一些什么事情，并且实现一个最小可用版本。

插件地址：https://github.com/ant-design/babel-plugin-import

babel-plugin-import 介绍

Why：为什么需要这个插件

antd 和 element 这两个组件库，看它的源码， index.js 分别是这样的：

  1. // antd
  2. export { default as Button } from './button';
  3. export { default as Table } from './table';
  1. // element
  2. import Button from '../packages/button/index.js';
  3. import Table from '../packages/table/index.js';
  4. export default {
  5.   Button,
  6.   Table,
  7. };

antd 和 element 都是通过 ES6 Module 的 export 来导出带有命名的各个组件。

所以，我们可以通过 ES6 的 import { } from 的语法来导入单组件的 JS 文件。但是，我们还需要手动引入组件的样式：

  1. // antd
  2. import 'antd/dist/antd.css';
  3. // element
  4. import 'element-ui/lib/theme-chalk/index.css';

如果仅仅是只需要一个 Button 组件，却把所有的样式都引入了，这明显是不合理的。

当然，你说也可以只使用单个组件啊，还可以减少代码体积：

  1. import Button from 'antd/lib/button';
  2. import 'antd/lib/button/style';

PS：类似 antd 的组件库提供了 ES Module 的构建产物，直接通过 import {} from 的形式也可以 tree-shaking，这个不在今天的话题之内，就不展开说了~

对，这没毛病。但是，看一下如们需要多个组件的时候：

  1. import { Affix, Avatar, Button, Rate } from 'antd';
  3. import 'antd/lib/affix/style';
  4. import 'antd/lib/avatar/style';
  5. import 'antd/lib/button/style';
  6. import 'antd/lib/rate/style';

会不会觉得这样的代码不够优雅？如果是我，甚至想打人。

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

What：这个插件做了什么

简单来说，babel-plugin-import 就是解决了上面的问题，为组件库实现单组件按需加载并且自动引入其样式，如：

  1. import { Button } from 'antd';
  3.       ↓ ↓ ↓ ↓ ↓ ↓
  5. var _button = require('antd/lib/button');
  6. require('antd/lib/button/style');

只需关心需要引入哪些组件即可，内部样式我并不需要关心，你帮我自动引入就 ok。

How：这个插件怎么用

简单来说就需要关心三个参数即可：

  1. {
  2.   "libraryName": "antd",     // 包名
  3.   "libraryDirectory": "lib", // 目录，默认 lib
  4.   "style": true,             // 是否引入 style
  5. }

其它的看文档：https://github.com/ant-design/babel-plugin-import#usage

babel-plugin-import 源码分析

主要来看一下 babel-plugin-import 如何加载 JavaScript 代码和样式的。

以下面这段代码为例：

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

第一步 依赖收集

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

先看一下 ast 吧：

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

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

需要做的事情也很简单：

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

来看代码：

  1. ImportDeclaration(path, state) {
  2.   const { node } = path;
  3.   if (!node) return;
  4.   // 代码里 import 的包名
  5.   const { value } = node.source;
  6.   // 配在插件 options 的包名
  7.   const { libraryName } = this;
  8.   // babel-type 工具函数
  9.   const { types } = this;
  10.   // 内部状态
  11.   const pluginState = this.getPluginState(state);
  12.   // 判断是不是需要使用该插件的包
  13.   if (value === libraryName) {
  14.     // node.specifiers 表示 import 了什么
  15.     node.specifiers.forEach(spec => {
  16.       // 判断是不是 ImportSpecifier 类型的节点，也就是是否是大括号的
  17.       if (types.isImportSpecifier(spec)) {
  18.         // 收集依赖
  19.         // 也就是 pluginState.specified.Button = Button
  20.         // local.name 是导入进来的别名，比如 import { Button as MyButton } from 'antd' 的 MyButton
  21.         // imported.name 是真实导出的变量名
  22.         pluginState.specified[spec.local.name] = spec.imported.name;
  23.       } else {
  24.         // ImportDefaultSpecifier 和 ImportNamespaceSpecifier
  25.         pluginState.libraryObjs[spec.local.name] = true;
  26.       }
  27.     });
  28.     pluginState.pathsToRemove.push(path);
  29.   }
  30. }

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

第二步 判断是否使用

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

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

  1. ReactDOM.render(<Button>Hello</Button>);
  3.       ↓ ↓ ↓ ↓ ↓ ↓
  5. React.createElement(Button, null, "Hello");

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

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

来看代码：

  1. CallExpression(path, state) {
  2.   const { node } = path;
  3.   const file = (path && path.hub && path.hub.file) || (state && state.file);
  4.   // 方法调用者的 name
  5.   const { name } = node.callee;
  6.   // babel-type 工具函数
  7.   const { types } = this;
  8.   // 内部状态
  9.   const pluginState = this.getPluginState(state);
  11.   // 如果方法调用者是 Identifier 类型
  12.   if (types.isIdentifier(node.callee)) {
  13.     if (pluginState.specified[name]) {
  14.       node.callee = this.importMethod(pluginState.specified[name], file, pluginState);
  15.     }
  16.   }
  18.   // 遍历 arguments 找我们要的 specifier
  19.   node.arguments = node.arguments.map(arg => {
  20.     const { name: argName } = arg;
  21.     if (
  22.       pluginState.specified[argName] &&
  23.       path.scope.hasBinding(argName) &&
  24.       path.scope.getBinding(argName).path.type === 'ImportSpecifier'
  25.     ) {
  26.       // 找到 specifier，调用 importMethod 方法
  27.       return this.importMethod(pluginState.specified[argName], file, pluginState);
  28.     }
  29.     return arg;
  30.   });
  31. }

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

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

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

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

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

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

  1. import { Button } from 'antd';
  3.       ↓ ↓ ↓ ↓ ↓ ↓
  5. var _button = require('antd/lib/button');
  6. require('antd/lib/button/style');

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

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

  1. import { addSideEffect, addDefault, addNamed } from '@babel/helper-module-imports';
  3. importMethod(methodName, file, pluginState) {
  4.   if (!pluginState.selectedMethods[methodName]) {
  5.     // libraryDirectory：目录，默认 lib
  6.     // style：是否引入样式
  7.     const { style, libraryDirectory } = this;
  9.     // 组件名转换规则
  10.     // 优先级最高的是配了 camel2UnderlineComponentName：是否使用下划线作为连接符
  11.     // camel2DashComponentName 为 true，会转换成小写字母，并且使用 - 作为连接符
  12.     const transformedMethodName = this.camel2UnderlineComponentName
  13.       ? transCamel(methodName, '_')
  14.       : this.camel2DashComponentName
  15.       ? transCamel(methodName, '-')
  16.       : methodName;
  17.     // 兼容 windows 路径
  18.     // path.join('antd/lib/button') == 'antd/lib/button'
  19.     const path = winPath(
  20.       this.customName
  21.         ? this.customName(transformedMethodName, file)
  22.         : join(this.libraryName, libraryDirectory, transformedMethodName, this.fileName),
  23.     );
  24.     // 根据是否有导出 default 来判断使用哪种方法来生成 import 语句，默认为 true
  25.     // addDefault(path, 'antd/lib/button', { nameHint: 'button' })
  26.     // addNamed(path, 'button', 'antd/lib/button')
  27.     pluginState.selectedMethods[methodName] = this.transformToDefaultImport
  28.       ? addDefault(file.path, path, { nameHint: methodName })
  29.       : addNamed(file.path, methodName, path);
  30.     // 根据不同配置 import 样式
  31.     if (this.customStyleName) {
  32.       const stylePath = winPath(this.customStyleName(transformedMethodName));
  33.       addSideEffect(file.path, `${stylePath}`);
  34.     } else if (this.styleLibraryDirectory) {
  35.       const stylePath = winPath(
  36.         join(this.libraryName, this.styleLibraryDirectory, transformedMethodName, this.fileName),
  37.       );
  38.       addSideEffect(file.path, `${stylePath}`);
  39.     } else if (style === true) {
  40.       addSideEffect(file.path, `${path}/style`);
  41.     } else if (style === 'css') {
  42.       addSideEffect(file.path, `${path}/style/css`);
  43.     } else if (typeof style === 'function') {
  44.       const stylePath = style(path, file);
  45.       if (stylePath) {
  46.         addSideEffect(file.path, stylePath);
  47.       }
  48.     }
  49.   }
  50.   return { ...pluginState.selectedMethods[methodName] };
  51. }

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

addSideEffect

  1. addSideEffect(path, 'source');
  3.       ↓ ↓ ↓ ↓ ↓ ↓
  5. import "source"

addDefault

  1. addDefault(path, 'source', { nameHint: "hintedName" })
  3.       ↓ ↓ ↓ ↓ ↓ ↓
  5. import hintedName from "source"

addNamed

  1. addNamed(path, 'named', 'source', { nameHint: "hintedName" });
  3.       ↓ ↓ ↓ ↓ ↓ ↓
  5. 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-plugin-import

看了这么多，自己动手实现一个简易版的 babel-plugin-import 吧。

如果还不了解如何实现一个 Babel 插件，可以阅读 【Babel 插件入门】如何用 Babel 为代码自动引入依赖

最简功能实现

按照上文说的，最重要的配置项就是三个：

  1. {
  2.   "libraryName": "antd",
  3.   "libraryDirectory": "lib",
  4.   "style": true,
  5. }

所以我们也就只实现这三个配置项。

并且，上文提到，真实情况中会有多种方式来调用一个组件，这里我们也不处理这些复杂情况，只实现最常见的 <Button /> 调用。

入口文件

入口文件的作用是获取用户传入的配置项并且将核心插件代码作用到 ast 上。

  1. import Plugin from './Plugin';
  3. export default function({ types }) {
  4.   let plugins = null;
  6.   // 将插件作用到节点上
  7.   function applyInstance(method, args, context) {
  8.     for (const plugin of plugins) {
  9.       if (plugin[method]) {
  10.         plugin[method].apply(plugin, [...args, context]);
  11.       }
  12.     }
  13.   }
  15.   const Program = {
  16.     // ast 入口
  17.     enter(path, { opts = {} }) {
  18.       // 初始化插件实例
  19.       if (!plugins) {
  20.         plugins = [
  21.           new Plugin(
  22.             opts.libraryName,
  23.             opts.libraryDirectory,
  24.             opts.style,
  25.             types
  26.           ),
  27.         ];
  28.       }
  29.       applyInstance('ProgramEnter', arguments, this);
  30.     },
  31.     // ast 出口
  32.     exit() {
  33.       applyInstance('ProgramExit', arguments, this);
  34.     },
  35.   };
  37.   const ret = {
  38.     visitor: { Program },
  39.   };
  41.   // 插件只作用在 ImportDeclaration 和 CallExpression 上
  42.   ['ImportDeclaration', 'CallExpression'].forEach(method => {
  43.     ret.visitor[method] = function() {
  44.       applyInstance(method, arguments, ret.visitor);
  45.     };
  46.   });
  48.   return ret;
  49. }

核心代码

真正修改 ast 的代码是在 plugin 实现的：

  1. import { join } from 'path';
  2. import { addSideEffect, addDefault } from '@babel/helper-module-imports';
  4. /**
  5.  * 转换成小写，添加连接符
  6.  * @param {*} _str   字符串
  7.  * @param {*} symbol 连接符
  8.  */
  9. function transCamel(_str, symbol) {
  10.   const str = _str[0].toLowerCase() + _str.substr(1);
  11.   return str.replace(/([A-Z])/g, $1 => `${symbol}${$1.toLowerCase()}`);
  12. }
  14. /**
  15.  * 兼容 Windows 路径
  16.  * @param {*} path
  17.  */
  18. function winPath(path) {
  19.   return path.replace(/\\/g, '/');
  20. }
  22. export default class Plugin {
  23.   constructor(
  24.     libraryName, // 需要使用按需加载的包名
  25.     libraryDirectory = 'lib', // 按需加载的目录
  26.     style = false, // 是否加载样式
  27.     types // babel-type 工具函数
  28.   ) {
  29.     this.libraryName = libraryName;
  30.     this.libraryDirectory = libraryDirectory;
  31.     this.style = style;
  32.     this.types = types;
  33.   }
  35.   /**
  36.    * 获取内部状态，收集依赖
  37.    * @param {*} state
  38.    */
  39.   getPluginState(state) {
  40.     if (!state) {
  41.       state = {};
  42.     }
  43.     return state;
  44.   }
  46.   /**
  47.    * 生成 import 语句（核心代码）
  48.    * @param {*} methodName
  49.    * @param {*} file
  50.    * @param {*} pluginState
  51.    */
  52.   importMethod(methodName, file, pluginState) {
  53.     if (!pluginState.selectedMethods[methodName]) {
  54.       // libraryDirectory：目录，默认 lib
  55.       // style：是否引入样式
  56.       const { style, libraryDirectory } = this;
  57.       // 组件名转换规则
  58.       const transformedMethodName = transCamel(methodName, '');
  59.       // 兼容 windows 路径
  60.       // path.join('antd/lib/button') == 'antd/lib/button'
  61.       const path = winPath(
  62.         join(this.libraryName, libraryDirectory, transformedMethodName)
  63.       );
  64.       // 生成 import 语句
  65.       // import Button from 'antd/lib/button'
  66.       pluginState.selectedMethods[methodName] = addDefault(file.path, path, {
  67.         nameHint: methodName,
  68.       });
  69.       if (style) {
  70.         // 生成样式 import 语句
  71.         // import 'antd/lib/button/style'
  72.         addSideEffect(file.path, `${path}/style`);
  73.       }
  74.     }
  75.     return { ...pluginState.selectedMethods[methodName] };
  76.   }
  78.   ProgramEnter(path, state) {
  79.     const pluginState = this.getPluginState(state);
  80.     pluginState.specified = Object.create(null);
  81.     pluginState.selectedMethods = Object.create(null);
  82.     pluginState.pathsToRemove = [];
  83.   }
  85.   ProgramExit(path, state) {
  86.     // 删除旧的 import
  87.     this.getPluginState(state).pathsToRemove.forEach(
  88.       p => !p.removed && p.remove()
  89.     );
  90.   }
  92.   /**
  93.    * ImportDeclaration 节点的处理方法
  94.    * @param {*} path
  95.    * @param {*} state
  96.    */
  97.   ImportDeclaration(path, state) {
  98.     const { node } = path;
  99.     if (!node) return;
  100.     // 代码里 import 的包名
  101.     const { value } = node.source;
  102.     // 配在插件 options 的包名
  103.     const { libraryName } = this;
  104.     // babel-type 工具函数
  105.     const { types } = this;
  106.     // 内部状态
  107.     const pluginState = this.getPluginState(state);
  108.     // 判断是不是需要使用该插件的包
  109.     if (value === libraryName) {
  110.       // node.specifiers 表示 import 了什么
  111.       node.specifiers.forEach(spec => {
  112.         // 判断是不是 ImportSpecifier 类型的节点，也就是是否是大括号的
  113.         if (types.isImportSpecifier(spec)) {
  114.           // 收集依赖
  115.           // 也就是 pluginState.specified.Button = Button
  116.           // local.name 是导入进来的别名，比如 import { Button as MyButton } from 'antd' 的 MyButton
  117.           // imported.name 是真实导出的变量名
  118.           pluginState.specified[spec.local.name] = spec.imported.name;
  119.         } else {
  120.           // ImportDefaultSpecifier 和 ImportNamespaceSpecifier
  121.           pluginState.libraryObjs[spec.local.name] = true;
  122.         }
  123.       });
  124.       // 收集旧的依赖
  125.       pluginState.pathsToRemove.push(path);
  126.     }
  127.   }
  129.   /**
  130.    * React.createElement 对应的节点处理方法
  131.    * @param {*} path
  132.    * @param {*} state
  133.    */
  134.   CallExpression(path, state) {
  135.     const { node } = path;
  136.     const file = (path && path.hub && path.hub.file) || (state && state.file);
  137.     // 方法调用者的 name
  138.     const { name } = node.callee;
  139.     // babel-type 工具函数
  140.     const { types } = this;
  141.     // 内部状态
  142.     const pluginState = this.getPluginState(state);
  144.     // 如果方法调用者是 Identifier 类型
  145.     if (types.isIdentifier(node.callee)) {
  146.       if (pluginState.specified[name]) {
  147.         node.callee = this.importMethod(
  148.           pluginState.specified[name],
  149.           file,
  150.           pluginState
  151.         );
  152.       }
  153.     }
  155.     // 遍历 arguments 找我们要的 specifier
  156.     node.arguments = node.arguments.map(arg => {
  157.       const { name: argName } = arg;
  158.       if (
  159.         pluginState.specified[argName] &&
  160.         path.scope.hasBinding(argName) &&
  161.         path.scope.getBinding(argName).path.type === 'ImportSpecifier'
  162.       ) {
  163.         // 找到 specifier，调用 importMethod 方法
  164.         return this.importMethod(
  165.           pluginState.specified[argName],
  166.           file,
  167.           pluginState
  168.         );
  169.       }
  170.       return arg;
  171.     });
  172.   }
  173. }

这样就实现了一个最简单的 babel-plugin-import 插件，可以自动加载单包和样式。

完整代码：https://github.com/axuebin/babel-plugin-import-demo

总结

本文通过源码解析和动手实践，深入浅出的介绍了 babel-plugin-import 插件的原理，希望大家看完这篇文章之后，都能清楚地了解这个插件做了什么事。

关于 Babel 你会用到的一些链接：

原文链接：http://www.cnblogs.com/axuebin/p/babel-plugin-import.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号