type
status
date
slug
summary
tags
category
icon
password
Edited
Jul 21, 2023 08:33 AM
Created
Jul 21, 2023 08:22 AM
初始化
首先创建一个
webpack目录，并安装Babel相关的工具分别介绍一下每个包的作用
- @babel/parser
将代码转为AST
- @babel/traverse
遍历AST
- @babel/core
用于将AST转为代码，根据 preset 进行es5、es6等代码的编译
- @babel/preset-env
用于提供编译环境支持，已经不兼容的polyfill
使用
我们先从一个代码文件来查看babel的使用流程
代码如下所示
ImportDeclaration：这类东西都属于代码编译为AST所生成的token
接下来就是根据入口文件来遍历所有依赖获取依赖集，通过对每一个依赖进行
readCode 调用这样我们就获取到了所有依赖关系了（ps: 入口文件也算一个依赖）
接着我们就对文件进行打包处理
最后通过
来对入口文件进行打包，并生成对应的
bundle.js参考链接
- 作者:JinSo
- 链接:https://jinso365.top/article/mini-webpack
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。