为什么需要?
是什么?
如箭头函数转换成普通的function函数。因为并不是所有浏览器都支持箭头函数,使用babel就可以做兼容适配。
官网:https://babeljs.io/
中文官网:https://www.babeljs.cn/
========================
安装
命令行安装:
npm install @babel/cli @babel/core -D
使用
1、命令
npx babel src --out-dir dist #输出到dist目录
#或
npx babel src --out-file test.js #输出成test.js
光输出是不会进行转换的,想要转换需要对应的插件
2、插件
箭头函数转换
npm install @babel/plugin-transform-arrow-functions -D
然后项目内运行
npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions
let const 转成 var
npm install @babel/plugin-transform-block-scoping -D
然后项目内运行
npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions
3、预设
但是如果要转换的内容过多,一个个设置是比较麻烦的,我们可以使用预设(preset):
npm install @babel/preset-env -D
然后项目内运行
npx babel src --out-dir dist --presets=@babel/preset-env
========================
底层原理
工作流程
1、解析阶段(Parsing)
2、转换阶段(Transformation)
3、生成阶段(Code Generation)
编译器源代码:https://github.com/jamiebuilds/the-super-tiny-compiler
1、词法分析
对语句进行分割,如const name = “abc”,按空格分割开。
2、tokens数组
把分割开的每个词,放到数组里面
3、语法分析
分析关键字,如const、let等
分析运算符,如等号=
4、AST抽象语法树,遍历访问
把分解的结果用树结构表示出来,然后遍历,通过插件进行转换,如把const 转成var
5、新的AST,生成新的抽象语法树
新的树都是转换后的
6、变成目标源代码
========================
webpack中使用
查看 https://www.yuque.com/yejielin/mypn47/whbit4#TUEXI
配置文件