babel 按需加载插件的实现

实现按需加载

babel 插件根据 AST 分析 import 语法
对 ES6 Module import 语法进行转换

 // import { uniq } from "lodash"
 import uniq from "lodash/uniq"

三方库目录要支持 import uniq from "lodash/uniq" 方式
babel 通过 'babel-core' 的 transform 方法
babel-types 通过 AST 识别 import 语句
webpack 对 babel 后的代码的 import 的模块再加载资源

按需加载的目的：ES6 Module import 语法转换

ImportSpecifier 和 ImportNamespaceSpecifier 转化成 ImportDefaultSpecifier

 // import { uniq } from "lodash"
 import uniq from "lodash/uniq"

实现思路

• webpack 对 .js 文件使用 babel-loader
• 使用 babel 插件对 js 文件进行转义
  1 babel 通过 babylon 解释器把 js 转成 ast
  2 babel-traverse 对 AST 树进行解析遍历出整个树的path
  3 使用 plugin 对 path 操作解析出新的 AST 树
• 工具
  babel-core提供transform方法将代码字符串转换为AST树
  babel-types提供各种操作AST节点的工具库

babel 插件实现

• 语法转换用 babel，写 babel 插件
• 插件的 vistior 对象
• ImportDeclaration 方法 - 专门解析 import 操作符
• path 参数 AST 树
• 最后 path.replacereplaceWithMultiple 多节点替换单节点当前操作的语法片段
• replaceWith 单节点替换单节点

// 配置 .babelrc { "plugins": ["meimport"] }
var types = require('babel-types');

const visitor = {
  /*
   * ImportDeclaration 只对 import 操作符转化
   * path @AST ast 语法树
   * opt  @object 配置参数
   * return @AST
   */
  ImportDeclaration(path, opt){
    const specifiers = path.node.specifiers;
    const source = path.node.source;
    // 判断是 import {} from '' 的语法
    if (!types.isImportDefaultSpecifier(specifiers[0]) && !types.isImportNamespaceSpecifier(specifiers[0])) {
      var declarations = specifiers.map((specifier) => {      // 遍历  uniq extend flatten cloneDeep
        return types.ImportDeclaration(                         // 创建importImportDeclaration节点
          [types.importDefaultSpecifier(specifier.local)], // 创建 import default 操作符
          types.StringLiteral(`${source.value}/${specifier.local.name}`) // lodasha/uniq 
        )
      })
      console.log(JSON.stringify(declarations, null, 2))
      path.replaceWithMultiple(declarations)

    }
  }
};

module.exports = function (babel) {
  return {
    visitor
  };
}

// 使用 babel.transform 转换
var babel = require('babel-core'); // transform 把代码转成 AST
const code = `import {uniq, extend, flatten, cloneDeep } from "lodash"`;

const result = babel.transform(code, {
  plugins: [
    // [ { visitor }, { opt1: 1, opt2: 2 }]
    { visitor }
  ]
})

https://astexplorer.net/ AST 解析
参考
代码

总结

为了让代码中的 import { uniq } from "lodash" 导入语法能被 webpack 识别，加载正确的资源路径。
虽然我们库中导出的没问题不过 webpack 只能识别 import uniq from "lodash/uniq" 这种绝对路径。
这种 import 语法之间的转换可以使用 babel 插件的形式来解决。
为 babel-core 的 transform 方法写一个插件，使用 babel-types 来识别 JS 被 babel 转化后 AST 中的 import 语句，把符合 import { uniq } from "loadsh" 的语句转成 import uniq form "lodash/uniq"。
转化后的 import 语句的资源就可以被 webpack 正确识别，避免加载不必要的代码。