webpack(一)

首先 回顾我了解的 webpack ，是一些配置的知识，加上简单的使用方，所以这一次的学习，将进行比更深刻的学习

（一）那么开始我学习的是AST相关的知识

首先我们需要了解babel这个工具，babel是干嘛的？

直接总结(不去了解babel的原理)：

• babel可以将高级的代码翻译为es5
• @babel/parser 他是将代码转为ast语法树
• @babel/traverse 他是遍历语法树的
• @babel/generator 他是去将语法树转为代码
• @babel/core 他是将前面三者去包含的关系
• @babel/perset-env 他是包含一些规则，好像是例如要将es6转为es5的规则

(二) 然后我们来体验上面三个转换的过程

首先我们使用ts去编程，为了和babel源码有更好的提示 所以先安装ts

// 首先下载这些包
// 但是这些包可能下载的时候名字有变化，已经更新了，最新版才是ts，去npm搜下吧
// 1. 引入
import { parse } from '@babel/parser'
import traverse from '@babel/traverse'
import generator from '@babel/generator'

// 2. 我们写一句代码
let code = `let a = 'let';let b = '33'`

// 3. 转为ast语法树
const ast = parse(code, {sourceType: 'module'})

// 4. 遍历ast语法树
traverse(ast, {
// item 是遍历的每一项
  enter: item => {
  // 找到遍历的每一项中的VariableDeclaration这个类型
    if (item.node.type === 'VariableDeclaration') {
    // 找到item中的kind，将let改为var
      if (item.node.kind === 'let') {
        item.node.kind = 'var'
      }
    }
  }
});

// 5. 将语法树转换回去
let code2 = generator(ast, {}, code) 

console.log(code2)

语法树长这样

最后转换回去就是

可以看出语法树没有转换字符串let，如果是正则，这很难做到

其中也学习到一些文件依赖，通过记录文件依赖，以及判断当前有没有当前的文件，来防止循环依赖