minipack源码解析
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']
})本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录