抽象语法树

Posted 2021-12-30 前端精髓

webapck打包代码的时候会自动修改导入导出的格式，比如下面的例子：

require('./title')
// 修改为
__webpack_require__(/*! ./title */ "./src/title.js")

完整的打包之后的代码如下：

(() => 
  var __webpack_modules__ = (
    "./src/title.js":
      ((module) => 
        module.exports = 'title'
      )
  );
  var __webpack_module_cache__ = ;
  function __webpack_require__(moduleId) 
    var cachedModule = __webpack_module_cache__[moduleId];
    if (cachedModule !== undefined) 
      return cachedModule.exports;
    
    var module = __webpack_module_cache__[moduleId] = 
      exports: 
    ;
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    return module.exports;
  
  var __webpack_exports__ = ;
  (() => 
    let title = __webpack_require__(/*! ./title */ "./src/title.js")
    console.log(title)
  )();
)()

那么修改源代码导入导出格式就需要用到抽象语法树来实现，parser 是解析器用来把代码转换为抽象语法树，traverse 用来遍历抽象语法树的，generator 用来把语法树重新转换为代码，types 用来修改节点类型。

const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const generator = require('@babel/generator').default
const types = require('babel-types')

const sourceCode = 'const title = require("./title")'

const ast = parser.parse(sourceCode,  sourceType: "module" );

traverse(ast, 
  CallExpression: ( node ) => 
    if (node.callee.name === 'require') 
      const depModuleName = node.arguments[0].value // ./title
      const depModuleId = './src' + depModuleName // ./src/title.js
      node.arguments = [types.stringLiteral(depModuleId)] // 把./title改成./src/title.js
      node.callee.name = '__webpack_require__'
    
  
)
const  code  = generator(ast)
console.log(code) // const title = __webpack_require__("./src./title");

打开 https://astexplorer.net/ 这个网站，我们可以在线把代码转换为抽象语法树。

在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

查看这个网站，打开 babel 手册 https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md