前端学习之Babel转码器

前言

Babel转码器可以将ES6转为ES5代码，从而在老版本的浏览器运行。这说明你可以用ES6的方式编码，又不用担心现有环境是否支持。

浏览器支持性查看：https://caniuse.com/
Babel官网：https://babeljs.io/

Babel安装流程

1. 安装Babel
   在命令行或者终端输入如下命令

npm install --save-dev @babel/core
1

2. Babel的配置文件是.babelrc,存放在项目的根目录下(没有的话自己创建)。使用Babel的第一步，就是配置这个文件，该文件用来设置转码规则和插件，基本格式如下：

{
"presets":[],
"plugins":[]
}
1
2
3
4

3. 转码规则
   presets字段设置转码规则，官方提供以下的规则集，你可以根据需要安装，安装命令如下：

npm install --save-dev @babel/preset-env
1

4. 将规则加入.babelrc

{
"presets":["@babel/env"],
"plugins":[]
}
1
2
3
4

Babel命令行转码工具

Babel提供命令行工具@Babel/cil,用于命令行转码
安装该工具命令：

npm install --save-dev @babel/cli
1

用法如下：

• 转码结果输出到标注输出

npx babel 要运行的js文件
1

• 转码结果写入到一个文件

npx babel 要运行的js文件 --out-file 转码后的文件名
1

• 整个目录转码
  –out-dir或者-d指定输出目录

npx babel 要运行的js文件 --out-dir 指定目录
或者
npx babel 要运行的js文件 -d 指定目录
1
2
3