minipack 源码解析

Question

minipack 是一个非常简单的通过 babel 实现的、旨在讲述打包工具原理的仓库，这个仓库本身已经包含了详细的注释。大致过程可以梳理如下，从主入口中将代码转换为AST后找出主入口的依赖关系，通过这个依赖关系可以构建依赖图，最后通过依赖图转化为类commonjs模块的代码，打包在一块。

babylon

babylon是babel的js代码解析器，目前已经 babel 官方已经将仓库迁移到了 @babel 域下，改名为 babel-parser，可以通过以下命令安装

npm install -D @babel/parser

使用这个可以生成js代码的AST

const babelParser = require('@babel/parser');
const fs = require('fs');

const content = fs.readFileSync('./index.js');
babelParser.parse(content, {
    sourceType: 'module'
})

这个库的API非常简单，具体的options参数可以在官网找到 https://babeljs.io/docs/en/next/babel-parser.html

babel-traverse

Babel Traverse（遍历）模块维护了整棵树的状态，并且负责替换、移除和添加节点。我们可以和 Babylon 一起使用来遍历和更新节点。

这个模块帮助我们更改我们得到的AST，算是babel所做的中间工作

可以简单使用如下：

const babelParser = require('@babel/parser');
const traverse = require('babel-traverse').default;
const fs = require('fs');

const content = fs.readFileSync('./index.js', 'utf-8');
console.log(content);
const ast = babelParser.parse(content, {
    sourceType: 'module'
})
traverse(ast, {
    FunctionDeclaration: ({
        node
    }) => {
        console.log(node)
    }
})

babel-core

babel-core提供了babel的核心能力，将高版本的Es语法转换为浏览器支持的ES语法，主要API有：transform、transformSync 、transformAsync、transformFile、transformFileSync、transformFileAsync、transformFromAst、transformFromAstSync、transformFromAstAsync

按行为划分可以分为异步接口、同步接口、promise接口。

返回的结果是一个包含代码 code、sourcemap、ast 的对象:

{ code, map, ast }

const {
        code
    } = transformFromAst(ast, null, {
        presets: ['env']
    })