• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > JS、jQ >  使用Babel将ES6语法转换正文

使用Babel将ES6语法转换到ES5语法

作者:木子昭
类型:图文教程
点击次数:
发布时间:2018-08-03 11:06
分享到:
下面是Babel转换后结果:js文件夹里面的是两个ES6语法js文件,lib文件夹里面是转换后的两个ES5语法js文件:


转换示意图

Babel官网:


Babel官网

    Babel相当于一个翻译, 可以将ES6的语法,装换为ES5的语法

Babel的安装

    为了方便安装以及后续的管理, 我们使用npm管理工具, 安装babel

    1、新建一个目录, babel-test
    2、npm init, 一路回车, 会在babel-text生成配置文件package.json
    3、安装Babel相关的包

    安装es2015转码规则
npm install --save-dev babel-preset-es2015
`
    安装react转码规则
npm install --save-dev babel-preset-react
    安装es7提案转码规则
npm install --save-dev babel-preset-stage-3
Babel的配置
    在babel-test下新建配置文件.babelrc, 将刚刚安装的三个规则配置到.babelrc, 保存文件
{
    "presets": [
        "es2015",
        "react",
        "stage-3"
        ],
    "plugins":[]
}
Babel的使用
    为了便于项目管理,我们把babel的工具babel-cli之间安装到babel-test内
npm install --save-dev babel-cli
    在package.json 中配置运行命令build(命令作用为: 把根目录下的js文件夹内所有es6语法的js文件, 在保持原文件名的基础上, 转码输出到lib文件夹)
"build": "babel js -d lib"

build转码

    在根目录下新建js文件夹, 并新建两个es6语法的js文件, 使用npm run build转换, 查看结果


转换结果

(责任编辑:网页模板)
  • 本文标签:
  • Babel
ES6常用语法糖
重新认识ES6中的语法糖