1.在敕令行中运用 Babel

Babel 官方引荐将 Babel 装置在当地，由于 Babel 的差别版本以及差别转码划定规矩会起到差别的效果，全局装置会带来不必要的贫苦。在敕令提示符中转到自身的项目目录下：

npm install --save-dev babel-cli

假如你之前出于某些缘由实行了全局装置，能够经由过程下面的代码卸载全局局限的 Babel。宁神，这并不会影响到项目途径下的当地装置。

npm uninstall --global babel-cli

光有一个 babel-cli 什么也做不了，我们还要为 Babel 装置语法插件。官方供应了几套预设的插件鸠合，离别实用于 ES2015、React 和 ES7 的一些实验性特征。只是为了进修 ES6 的语法的话，选 ES2015 就好了。

npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react

在项目根目录下建立一个.babelrc文件，注重这是个设置文件，以点号开首，没有后缀。Windows 体系是不允许直接建立如许花样的文件的，须要借助代码编辑器来新建文件。建立好后写入以下内容来启用预设：

{    //须要用到的套件
    "presets": ["es2015",'react'],
    //须要用到的插件
    "plugins": []
}

至此，我们就完成了 babel-cli 的装置，能够最先运用了。

2.Mac 和 Linux 的成功

关于 Mac 和 Linux 用户，直接翻开 Terminal 并切换到项目文件地点位置，就可以够最先用了。下面的敕令会将转码效果输出到 Terminal 的规范输出中：

babel es6.js

固然更多的时刻我们是愿望把效果放入文件中的：

babel es6.js -o es6-babeled.js

另有更牛的，Babel 支撑及时转码，实行下面的敕令后，任何对 ES6 代码的修正，保留以后都邑自动转码，无需人工再干涉干与。（完成后用 Ctrl+C/Command+C 完毕）

babel es6.js --watch -o es6-babeled.js

Babel 还能批量处置惩罚全部途径下的 JS 文件，下面的代码把 src 目录下的文件批量转码并放到 lib 目录下：

babel src -d lib

还能够从 Terminal 的规范输入中读取文件举行转码：

babel -o es6-babeled.js < es6.js

官方另有一个更引荐的要领，在package.json文件中的scripts属性中增加一项”build”: “babel src -d build”，以后只要在项目根目录实行npm run build，Babel 就会自动将src目录下的 js 文件自动转码并放入build目录下。

3.Windows 的悲哀

Windows 用户很快就会会发明babel敕令基础用不了，体系不辨认这个敕令。搜检一下环境变量你就会发明，基础没有相干的途径在里面。假如你实行过全局装置的话，会在 Node.js 的装置目录下的 node_global 目录下看到一个 babel.cmd 文件，把这个途径增加到环境变量中，就可以用了。假如细看一下文件的内容，你就会发明奥妙地点。

@IF EXIST "%~dp0\node.exe" (
    "%~dp0\node.exe"  "%~dp0\node_modules\babel-cli\bin\babel.js" %*
) ELSE (
    @SETLOCAL
    @SET PATHEXT=%PATHEXT:;.JS;=;%
    node  "%~dp0\node_modules\babel-cli\bin\babel.js" %*
)

这个文件现实上是先搜检 node.exe 是不是存在，若存在，则实行node .node_modulesbabel-clibinbabel.js并接收后续的参数。这么一看就邃晓了，说白了 babel 的敕令行东西实质是个 js 文件，须要用node来运转。照这个思绪，我们只须要在项目的根目录下自行增加一个babel.cmd文件，并写入以下内容，就可以运用项目里的babel敕令了。

node .\node_modules\babel-cli\bin\babel.js %*

固然，用这个要领的条件是你须要设置好 Node.js 的环境，而且用 npm 装置好了 babel-cli，不然会报错说文件不存在。
以后的用法就和 Mac 和 Linux 下的一样了，看前面就好，不赘述了。

4.babel其他经常使用

babel-node
babel-node 是随 babel-cli 一同装置的另一款敕令行东西，是一个模仿 Node.js 环境的 REPL（Read-Evel-Print Loop，一种轮回实行“读取-实行-输出”的顺序）。实行babel-node会进入一个相似 Node.js 的环境，在这里你能够直接运转 ES6 的代码。你也能够用形如babel-node es6.js的敕令来直接运转用 ES6 编写的文件，babel-node 会在运转代码之前先将其编译成 ES5 的等效代码，然后实行。
以至能够改写package.json文件，用 babel-node 替换 node 敕令来直接运转。

{

"scripts": {
    "script.js": "babel-node script.js"    // 需替换成现实文件名
}

}

此时实行npm run script.js就等同于实行babel-node script.js

babel-core
这是 Babel 的中心 API 地点，在项目中加载该模块var babel = require(“babel-core”);，然后就可以够经由过程babel.transform(code, options)要领来实行转码，code是待转码的 ES6 代码字符串，options供应了一些转码申明，比方指定语法划定规矩、启用一些插件、设定编码等，详细用法能够参考这里。

babel-polyfill
Babel 默许只转码 ES6 的新语法（syntax），而不转换新的API，比方 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的要领（比方 Object.assign、Array.from）都不会转码。假如想让这写要领运转，必需require(“babel-polyfill”)。

babel-doctor
看名字就晓得，这个东西大概是排错用的。没错，假如在敕令行中实行babel敕令有题目的，能够用babel-doctor敕令搜检一下环境设置是不是准确。重要搜检以下几项内容：
o 项目根目录下是不是存在.babelrc文件
o 是不是有反复的Babel版本，比方同时装置了 Babel 5 和 Babel 6
o 一切已装置的 Babel 东西是不是晋级到了最新版
o npm 的版本是不是大于即是 3.3.0
在 Node.js 中运用 Babel
在 Node.js 环境中，能够直接在 js 文件里挪用 Babel 的转码功用。
babel-register
该模块给require()加上一个钩子，加载它以后，每当再 require 其他 js、jsx、es、es6 范例的文件，就会先用 Babel 举行转码。须要注重的是，运用该模块的文件自身并不会被转码，须要从外部实行转码。别的由因而及时转码，从效力上斟酌不实用与临盆环境，仅供进修研讨运用。

5.在浏览器中运用 Babel

在敕令行中运用 Babel 虽然在功用性上没得挑，但操纵起来若干有点贫苦。Babel 供应了一种能够在浏览器中运用的要领，只需两步就可以一劳永逸。这个要领唯一的瑕玷就是及时转码须要时候，性能上不及预先转换的计划，因而临盆环境中不引荐运用，仅供进修研讨运用。
起首我们须要下载browser.js，注重，这是 Babel 5 的版本，Babel 6 最先不再直接供应该文件，须要自行构建。
除了从上面的链接下载，你也能够用 npm 下载：

npm install babel-core@5

下载后在node_modules/babel-core子目录中就可以找到browser.js文件。
运用要领以下：

<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel" src="your_own_es6_file.js"></script>

有两点须要注重

1. browser.js 文件必需放在你自身的 js 文件之前

2. 你自身的文件的范例要写成type=”text/babel”

6.在线试用 Babel

有时刻我们并不须要在项目中操纵什么，地道就想看看 Babel 究竟做了什么。为此 Babel 官方供应了一套在线的REPL (Read-Eval-Print-Loop)，能够轻易的试用 Babel。

7.合营运用

1.Webpack用法

(1). 装置babel-loader

 npm install babel-loader babel-core --save -dev

(2).

设置loader
     module: {
       loaders: [{
           test: /\.js$/,
           exclude: /node_modules/,
           loader: "babel-loader"
       }]

}

(3).设置.babelrc文件

 {
       "presets": [
           // 须要用到的套件
       ],
       "plugins": [
           // 须要用到的插件
       ]
 }

注重：要设置好.babelrc文件

2.Gulp用法

(1).装置gulp-babel

 npm install gulp-babel --save -dev

2.定义task

(1)

var gulp = require("gulp");
     var babel = require("gulp-babel");
    
     gulp.task("default", function () {
       return gulp.src("src/app.js")
         .pipe(babel())
         .pipe(gulp.dest("dist"));
 });

(2)设置.babelrc文件

 

{
       "presets": [
           // 须要用到的套件
       ],
       "plugins": [
       // 须要用到的插件
       ]
 }

(3)Babel套件与插件

3-1:实用于ES6的套件: babel-preset-es2015

npm install babel-preset-es2015 --save -dev

.babelrc

{
    "presets": ["es2015"]
}

babel-preset-react

3-2:实用于React的套件:babel-preset-react

npm install --save-dev babel-preset-react

.babelrc

{
    "presets": ["react"]
}

3-3:object-assign
实用于Object.assign()
举例

var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

装置

npm install babel-plugin-transform-object-assign

.babelrc

{
  "plugins": ["transform-object-assign"]
}

3-4:object-rest-spread
实用于睁开运算符
举例

 var arr1 = [0, 1, 2];
    var arr2 = [3, 4, 5];
    arr1.push(...arr2);

装置

npm install babel-plugin-transform-object-rest-spread

.babelrc

{
  "plugins": ["transform-object-rest-spread"]
}