minipack源码解析

2019-07-24 14:17:49 浏览数 (1)

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有:transformtransformSynctransformAsynctransformFiletransformFileSynctransformFileAsynctransformFromAsttransformFromAstSynctransformFromAstAsync

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

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

代码语言:javascript复制
{ code, map, ast }
代码语言:javascript复制
const {
        code
    } = transformFromAst(ast, null, {
        presets: ['env']
    })

0 人点赞