Babel

Babel的作用

将ES6+、TS、React等转换成普通的js代码，供浏览器识别

Babel命令行使用

单独使用

• @babel/core
• @babel/cli
• @babel/plugin-transform-block-scoping: 块级作用域插件
• @babel/plugin-transform-arrow-function: 箭头函数插件

npx babel ./src  --out-dir ./build --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-function
# 将当前src目录下的文件进行转换，输出到build文件夹中，转换规则--plugins

• @babel/preset-env：预设preset，需要转换的过多时

npx babel ./src/ --out-dir ./build --presets=@babel/preset-env

Babel底层原理

可以将Babel看作是一个编译器

工作流程

• 解析阶段
  • 词法分析
  • 语法分析
• 转换阶段
  • AST抽象语法树
  • 运用各种plugin
  • 生成一个新的AST
• 生成阶段
  • 代码生成输出阶段