Babel入门——ES6转ES5

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Babel入门——ES6转ES5脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
原文转载阮一峰教程

本文讲解何在nodejs环境下使用babel将ES6代码转ES5以及运行ES6的js文件

配置.babelrc文件

首先安装es2015presets字段

$ npm install --save-dev babel-PReset-es2015

然后写入.babelrc

{
    "presets":[
        "es2015"
    ]
}

命令行转码babel-cli

$ npm install --global babel-cli

基本用法如下:

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

另一种方法是将babel-cli安装在项目中

$ npm install --save-dev babel-cli

然后,在package.json中加入:

{
    "scripts":{
        "build":"babel src -d lib"
    }
}

转码的时候,就执行下面的命令:

$ npm run build
关于npm scripts的更多用法详见阮一峰教程

babel-node

可以直接运行ES6代码

babel-node已安装在babel-cli中,所以无须额外安装
$ babel-node index.js

babel-node也已经安装在babel-cli中,无须额外安装
同样,改写package.json

{
    "scripts":{
        "start":"babel-node index.js"
    }
}

babel-register

babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码。
首先安装:

$ npm install --save-dev babel-register

使用时在文件头加载:

require("babel-register");
require("./index.js");

然后,就不需要手动对index.js转码了。

脚本宝典总结

以上是脚本宝典为你收集整理的Babel入门——ES6转ES5全部内容,希望文章能够帮你解决Babel入门——ES6转ES5所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。