手写webpack核心原理，支持typescript的编译和循环依赖问题的解决

 

主要知识点

1. babel读取代码的import语句
2. 算法：bfs遍历依赖图
3. 为浏览器定义一个require函数的polyfill
4. 算法：用记忆化搜索解决require函数的循环依赖问题

Quick Start

GitHub：https://github.com/Hans774882968/mini-webpack

npm install
npm run bundle
修改index.html依赖的js文件路径（bundle_ts.js），复制到dist文件夹，然后点击打开index.html。

依赖

npm i @babel/parser
npm i @babel/traverse
npm i -D @types/babel__traverse
npm i @babel/core @babel/preset-env
npm i -D @babel/preset-typescript
npm i -D @types/babel__core
npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
npm i typescript@4.7.4

注意点：

1. 配置eslint后记得重启一下vscode，IDE提示才会生效。
2. 我们的命令在2022-08-27下载了@babel/core7.18.13，对应的ts版本要指定为typescript@4.7.4，否则运行代码会报错。

引言

主要是借鉴参考链接1来实现一个mini-webpack，但在功能上有所超越：

1. 根据入口文件的拓展名，决定用ts或js来编译。