Babel转码器入门

现在ES6非常火，但是有些特性浏览器还未完全支持，这样如果你写的代码是ES6的话，你就需要一款神器可以帮你将ES6的代码转为ES5，从而在现有的环境中执行。

接下来就跟大家分享如何使用Babel这个神器。

首先，我们需要在我们电脑上安装Node环境，
，然后像装其他软件一样在你的电脑上安装，
安装成功后，cmd进入命令行窗口，键入

node -v

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

再创建一个main.js文件

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

该文件用来设置转码规则和插件，在你的.babelrc文件中加入：

{
    "presets": [
      "latest",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

# 最新转码规则
$ npm install --save-dev babel-preset-latest

# react 转码规则
$ npm install --save-dev babel-preset-react

# 不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

接下来安装命令行转码工具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 转码。这意味着，如果项目要运行，全局环境必须有 Babel，也就是说项目产生了对环境的依赖。另一方面，这样做也无法支持不同项目使用不同版本的 Babel。

一个解决办法是将babel-cli安装在项目之中。

# 安装
$ npm install --save-dev babel-cli

然后，改写package.json

 {
     "scripts": {
    "build": "babel app/ -d lib"
  },
 "devDependencies": {
    "babel-cli": "^6.26.0"
  },
  }

//example.js
input.map(item => item + 1);  //箭头函数的ES6的特性

保存后命令行执行

npm run build

"use strict";

input.map(function (item) {
  return item + 1;
});

已经帮你转成ES5的语法了

以上文章参考阮一峰老师的，内容非常详尽大家可前往学习！