手机版 欢迎访问it开发者社区(www.mfbz.cn)网站

当前位置: > 开发

JavaScript学习(七十)—ES6之 Babel转码器

时间:2021/5/11 14:39:29|来源:|点击: 次

JavaScript学习(七十)—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是调用你安装包执行的什么内容,转码结果输出到命令行窗口输出

基本语法如下:

语法一:
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

语法二:

在这里插入图片描述

在这里插入图片描述
语法三:
在这里插入图片描述

Copyright © 2002-2019 某某自媒体运营 版权所有