前端学习之Babel转码器
前言
Babel转码器可以将ES6转为ES5代码，从而在老版本的浏览器运行。这说明你可以用ES6的方式编码，又不用担心现有环境是否支持。
浏览器支持性查看：https://caniuse.com/
Babel官网：https://babeljs.io/
Babel安装流程
- 安装Babel
在命令行或者终端输入如下命令
npm install --save-dev @babel/core
- Babel的配置文件是.babelrc,存放在项目的根目录下(没有的话自己创建)。使用Babel的第一步，就是配置这个文件，该文件用来设置转码规则和插件，基本格式如下：
{
"presets":[],
"plugins":[]
}
- 转码规则
presets字段设置转码规则，官方提供以下的规则集，你可以根据需要安装，安装命令如下：
npm install --save-dev @babel/preset-env
- 将规则加入.babelrc
{
"presets":["@babel/env"],
"plugins":[]
}
Babel命令行转码工具
Babel提供命令行工具@Babel/cil,用于命令行转码
安装该工具命令：
npm install --save-dev @babel/cil
用法如下：
- 转码结果输出到标注输出
npx babel 要运行的js文件
- 转码结果写入到一个文件
npx babel 要运行的js文件 --out-file 转码后的文件名
- 整个目录转码
–out-dir或者-d指定输出目录
npx babel 要运行的js文件 --out-dir 指定目录
或者
npx babel 要运行的js文件 -d 指定目录