minipack是一个非常简单的通过babel实现的、旨在讲述打包工具原理的仓库,这个仓库本身已经包含了详细的注释。
大致过程可�以梳理如下,从主入口中将代码转换为AST后找出�主入口的依赖关系,通过这个依赖关系可以�构建依赖图,最后通过依赖图转化为类commonjs模块的代码,打包在一块。�
babylon
babylon是babel的js代码解析器,目前已经babel官方已经将仓库迁移到了@babel域下,改名为babel-parser,可以通过以下命令安装
代码语言:javascript复制npm install -D @babel/parser
使用这个可以生成js代码的AST
代码语言:javascript复制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所做的中间工作
可以简单使用如下:
代码语言:javascript复制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的对象:
代码语言:javascript复制{ code, map, ast }
代码语言:javascript复制const {
code
} = transformFromAst(ast, null, {
presets: ['env']
})