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转码了。

    原文作者:ChaunceyQu
    原文地址: https://segmentfault.com/a/1190000012514759
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞