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
- 生成阶段
- 代码生成输出阶段