当我们 import 一个模块的时候,可以这样默认引入:

import path from 'path'; path.join('a', 'b'); function func() { const sep = 'aaa'; console.log(path.sep); }

也可以这样解构引入:

import { join, sep as _sep } from 'path'; join('a', 'b'); function func() { const sep = 'aaa'; console.log(_sep); }

第一种默认引入叫 default import,第二种解构引入叫 named import。

不知道大家习惯用哪一种。

如果有个需求,让你把所有的 default import 转成 named import,你会怎么做呢?

可能你会说这个不就是找到所有用到引入变量的地方,修改成直接调用方法,然后那些方法名以解构的方式写在 import 语句里么。

但如果说要改的项目有 100 多个这种文件呢?(触发 treeshking 就需要这么改)

这时候就可以考虑 babel 插件了,它很适合做这种有规律且数量庞大的代码的自动修改。

让我们通过这个例子感受下 babel 插件的威力吧。

因为代码比较多,大家可能没耐心看,要不我们先看效果吧:

测试效果

输入代码是这样:

import path from 'path'; path.join('a', 'b'); function func() { const sep = 'aaa'; console.log(path.sep); }

我们引入该 babel 插件,读取输入代码并做转换:

const { transformFileSync } = require('@babel/core'); const importTransformPlugin = require('./plugin/importTransform'); const path = require('path'); const { code } = transformFileSync(path.join(__dirname, './sourceCode.js'), { plugins: [[importTransformPlugin]] }); console.log(code);

打印如下:

我们完成了 default import 到 named import 的自动转换。

可能有的同学担心重名问题,我们测试一下:

可以看到,插件已经处理了重名问题。

思路分析

import 语句中间的部分叫做 specifier,我们可以通过 astexplorer.net 来可视化的查看它的 AST。

比如这样一条 import 语句:

import React, {useState as test, useEffect} from 'react';

它对应的 AST 是这样的:

也就是说默认 import 是 ImportDefaultSpecifier,而解构 import 是 ImportSpecifier

ImportSpecifier 语句有 local 和 imported 属性,分别代表引入的名字和重命名后的名字:

那我们的目的明确了,就是把 ImportDefaultSpecifier 转成 ImportSpecifier,并且使用到的属性方法来设置 imported 属性,需要重命名的还要设置下 local 属性。

怎么知道使用到哪些属性方法呢?也就是如何分析变量的引用呢?

babel 提供了 scope 的 api,用于作用域分析,可以拿到作用域中的声明,和所有引用这个声明的地方。

比如这里就可以用 scope.getBinding 方法拿到该变量的声明:

const binding = scope.getBinding('path');

然后用 binding.references 就可以拿到所有引用这个声明的地方,也就是 path.join 和 path.sep。

之后就可以把这两处引用改为直接的方法调用,然后修改下 import 语句为解构就可以了。

我们总结一下步骤:

  • 找到 import 语句中的 ImportDefaultSpecifier
  • 拿到 ImportDefaultSpecifier 在作用域的声明(binding)
  • 找到所有引用该声明的地方(reference)
  • 修改各处引用为直接调用函数的形式,收集函数名
  • 如果作用域中有重名的变量,则生成一个唯一的函数名
  • 根据收集的函数名来修改 ImportDefaultSpecifierImportSpecifier

原理大概过了一遍,我们来写下代码

代码实现

babel 插件是函数返回对象的形式,返回的对象中主要是通过 visitor 属性来指定对什么 AST 做什么处理。

我们搭一个 babel 插件的骨架:

const { declare } = require('@babel/helper-plugin-utils'); const importTransformPlugin = declare((api, options, dirname) => { api.assertVersion(7); return { visitor: { ImportDeclaration(path) { } } } }); module.exports = importTransformPlugin;

这里我们要处理的是 import 语句 ImportDeclaration

@babel/helper-plugin-utils 包的 declare 方法的作用是给 api 扩充一个 assertVersion 方法。而 assertVersion 的作用是如果这个插件工作在了 babel6 上就会报错说这个插件只能用在 babel7,可以避免报的错看不懂。

path 是用于操作 AST 的一些 api,而且也保留了 node 之间的关联,比如 parent、sibling 等。

接下来进入正题:

我们要先取出 specifiers 的部分,然后找出 ImportDefaultSpecifier

ImportDeclaration(path) { // 找到 import 语句中的 default import const importDefaultSpecifiers = path.node.specifiers.filter(item => api.types.isImportDefaultSpecifier(item)); // 对每个 default import 做转换 importDefaultSpecifiers.forEach(defaultSpecifier => { }); }

然后对每一个 default import 都要根据在作用域中的声明找到所有引用的地方:

// import 变量的名字 const importId = defaultSpecifier.local.name; // 该变量的声明 const binding = path.scope.getBinding(importId); binding.referencePaths.forEach(referencePath=> { });

然后对每个引用到该 import 的地方都做修改,改为直接调用函数,并且把函数名收集起来。这里要注意的是,如果作用域中有同名变量还要生成一个新的唯一 id。

// 该变量的声明 const binding = path.scope.getBinding(importId); const referedIds = []; const transformedIds = []; // 收集所有引用该声明的地方的方法名 binding.referencePaths.forEach(referencePath=> { const currentPath = referencePath.parentPath; const methodName = currentPath.node.property.name; // 之前方法名 referedIds.push(currentPath.node.property); if (!currentPath.scope.getBinding(methodName)) {// 如果作用域没有重名变量 const methodNameNode = currentPath.node.property; currentPath.replaceWith(methodNameNode); transformedIds.push(methodNameNode); // 转换后的方法名 } else {// 如果作用域有重名变量 const newMethodName = referencePath.scope.generateUidIdentifier(methodName); currentPath.replaceWith(newMethodName); transformedIds.push(newMethodName); // 转换后的方法名 } });

这部分逻辑比较多,着重讲一下。

我们对每个引用了该变量的地方都要记录下引用了哪个方法,比如 path.join、path.sep 就引用了 join 和 sep 方法。

然后就要把 path.join 替换成 join,把 path.sep 替换成 sep。

如果作用域中有了 join 或者 sep 的声明,需要生成一个新的 id,并且记录下新的 id 是什么。

收集了所有的方法名,就可以修改 import 语句了:

// 转换 import 语句为 named import const newSpecifiers = referedIds.map((id, index) => api.types.ImportSpecifier(transformedIds[index], id)); path.node.specifiers = newSpecifiers;

没有 babel 插件基础可能看的有点晕,没关系,知道他是做啥的就行。我们接下来试下效果。

思考和代码

我们做了 default import 到 named import 的自动转换,其实反过来也一样,不也是分析 scope 的 binding 和 reference,然后去修改 AST 么?感兴趣的同学可以试下反过来转换怎么写。

插件全部代码如下:

const { declare } = require('@babel/helper-plugin-utils'); const importTransformPlugin = declare((api, options, dirname) => { api.assertVersion(7); return { visitor: { ImportDeclaration(path) { // 找到 import 语句中的 default import const importDefaultSpecifiers = path.node.specifiers.filter(item => api.types.isImportDefaultSpecifier(item)); // 对每个 default import 做转换 importDefaultSpecifiers.forEach(defaultSpecifier => { // import 变量的名字 const importId = defaultSpecifier.local.name; // 该变量的声明 const binding = path.scope.getBinding(importId); const referedIds = []; const transformedIds = []; // 收集所有引用该声明的地方的方法名 binding.referencePaths.forEach(referencePath=> { const currentPath = referencePath.parentPath; const methodName = currentPath.node.property.name; // 之前方法名 referedIds.push(currentPath.node.property); if (!currentPath.scope.getBinding(methodName)) {// 如果作用域没有重名变量 const methodNameNode = currentPath.node.property; currentPath.replaceWith(methodNameNode); transformedIds.push(methodNameNode); // 转换后的方法名 } else {// 如果作用域有重名变量 const newMethodName = referencePath.scope.generateUidIdentifier(methodName); currentPath.replaceWith(newMethodName); transformedIds.push(newMethodName); // 转换后的方法名 } }); // 转换 import 语句为 named import const newSpecifiers = referedIds.map((id, index) => api.types.ImportSpecifier(transformedIds[index], id)); path.node.specifiers = newSpecifiers; }); } } } }); module.exports = importTransformPlugin;

总结

我们要做 default import 转 named import,也就是 ImportDefaultSpecifierImportSpecifier,要通过 scope 的 api 分析 binding 和 reference,找到所有引用的地方,替换成直接调用函数的形式,然后再去修改 import 语句的 AST 就可以了。

babel 插件特别适合做这种有规律且转换量比较大的需求,在一些场景下是有很大的威力的。