ES6学习— Babel转码器的使用和配置

Posted 2021-05-16 乘风破浪的程序媛

ES6学习（一）— Babel转码器的使用和配置

Babel转码器

• Babel是一个广泛使用的ES6转码器，可以将ES6代码转化为ES5代码从而在老版本的浏览器进行。

• 这意味着，你可以使用ES6的方式编写程序，又不用担心现有的环境是否支持
  

Babel转码器使用的步骤

步骤一

• 在项目中，安装Babel转码器（n前面可以加个c这样安装速度会快一些）

语法：(c )npm install --save-dev @babel/core

步骤二

• 配置文件.babelrc,存放在项目的根目录下，使用Babel的第一步，就是配置整个文件 该文件用来配置转码规则和插件，基本格式如下：

{
    "presets":[],
    "plugins":[]
}

步骤三

• presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装(这里我安装的是第一个)

最新转码规则：

(c)npm install --save-dev @babel/preset-env

react规则:

(c ) npm install --save-dev @babel/preset-react

步骤四

配置文件规则：将下面的规则加入.babelrc

将下面的规则加入.babelrc
{
    "presets":[
    "@babel/ennv",
    "@babel/preset-react"
    ],
    "plugins":[]

}

注意：因为我安装的是 env 所以只拿一个就好

步骤五

安装命令行工具：

npm install --save-dev @babel/cli

步骤六：

命令行进行转码

• 注意：npm是安装包的管理工具， npx是调用你安装包执行的什么内容，转码结果输出到命令行窗口输出

基本语法如下：

语法一：

语法二：

语法三：