具体的实现步骤

  1. 获取模块内容
  2. 分析模块内容(安装@babel/parser包)
  3. 对模块内容处理
  4. 递归所有模块
  5. 生成最终代码

1.获取模块内容

手写一个简易版的webpack

2.分析模块内容(安装@babel/parser包)

      babel/parser帮助我们把代码生成一个js对象
手写一个简易版的webpack

3.对模块内容处理

      安装@babel/traverse包(遍历AST)
      安装@babel/core和@babel/preset-env包(ES6转ES5)
手写一个简易版的webpack
手写一个简易版的webpack
      把前面生成的东西全部放到一个对象moduleInfo里面,并把它从getModuleInfo里面return出去:
手写一个简易版的webpack

4.递归所有模块。递归的去调用依赖文件,并返回一个对象depsGraph

手写一个简易版的webpack

5.生成最终的代码

手写一个简易版的webpack
手写一个简易版的webpack
      怎么把所有的文件打包之后形成一个文件?通过require方法,原理就是递归的方式不停的调用自己。
手写一个简易版的webpack

相关文章:

  • 2021-08-19
  • 2021-04-01
  • 2021-11-23
  • 2022-12-23
  • 2021-09-08
  • 2021-04-20
猜你喜欢
  • 2021-09-25
  • 2021-12-26
  • 2022-01-31
  • 2021-12-10
  • 2021-09-29
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案