实现一个小型打包工具
category
Web
date
Jul 21, 2023
icon
slug
mini-webpack
status
Published
summary
实现一个小型打包工具
tags
Webpack
JavaScript
type
Post
初始化
首先创建一个
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