工程化、Babel、AST
模块化一直在发展，然后 Node 兴起，导致前端工程化的出现
模块化的发展
在模块化的历程中我们详细分析过这个发展过程，主要分为三块
- IIFE
- CommonJS、AMD
- ESM 模块化
因为前端复杂度变高，工程化是必然阶段，既然有了工程化，打包工具就孕育而生，其中以 webpack 最为著名，其实这些打包器的就是做了以下几点
- 你可以写最新的ES6、7、8、9、10、11代码，用最新的语法，到时候帮你转成浏览器能识别的 ES5 语法
- 你可以按照写很多很多js、css文件，到时候打包时把它打包成几个文件
这其中就用到了 babel
Babel
Babel 是一个 JavaScript 编译器，将 JavaScript 代码解析为 AST（抽象语法树），再遍历 AST 进行修改，把 AST 变成 ES5 语法
babel 的原理
- parse：把代码 code 变成 AST
- traverse：遍历 AST 进行修改
- generate：把 AST 变成代码 code2
即 code -- (1) --> ast --> (2) --> ast2 --> (3) --> code2
为什么必须要用 AST
因为用变量、正则表达式实现不了，只能通过 AST 这种把代码的每个词转换为树形结构的对象形式能力的工具才能做到。所以才能用到
正则会把 let a = 'let' 变成 var a = 'var'
babel 的作用
babel 可以把高级代码翻译为 ES5
@babel/parser
@babel/traverse
@babel/generator
@babel/core 包含前三者
@babel/preset-env 内置很多规则
babel 能让开发者愉快的使用 ES6 语法，这解决了 webpack 等打包器的第一个问题，第二个问题就是如何将多个文件打包成一个文件，这点就是 webpack 做的事情了