使用Babel搭建ES6转译环境-优快云博客

本文档介绍如何通过Babel搭建ES6到ES5的转译环境，以应对浏览器对ES6支持的不一致。首先，通过npm初始化项目，接着安装babel-cli和babel-preset-es2015。配置好编译规则后，运行特定命令可实现文件的自动编译。此外，还提及了结合gulp或webpack等工具的使用方式。

阮老师的文档教程:http://es6.ruanyifeng.com/

由于现在浏览器支持的情况并不乐观，有的部分支持或干脆不支持，因此，我们很有必要来一个中间层工具，转译ES6成ES5，让我们使用上ES6的很多新的特性，同时写出来的代码转译成浏览器几乎都支持的ES5，这个就babel；

在线转译工具：https://www.babeljs.cn/repl/

目录结构：

1.初始化项目：

npm init

npm init 生成配置文件；

2.然后我们安装一下babel的命令行环境

首先安装babel-cli（用于在终端使用babel）

npm install babel-cli -g

3.进入某个项目根目录，安装babel-cli和babel-preset-es2015

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

注：Babel5版本默认包含各种转换插件，然而Babel6.x相关转换插件需要自己下载，如transform-es2015-arrow-functions、transform-es2015-classes等，而ES2015 preset包含了所有插件。如果不安装任何插件，那么在命令行进行转换是没有任何效果的！

其中--save参数自动更新package.json文件，写进依赖项

4.配置编译规则

{
    "presets": [
        "es2015"
    ],
    "plugins": []
}

5.然后我们用命令行进入这个目录后，执行

babel es6.js -w -o es5.js

并且每次保存后，都会自动编译，并显示changed [文件]

5.案例

es6.js

let a='a';
()=>{
    console.log(a)
}
let array1=[1,2,3,4,5],
array2=[2,3,4,52,6,9];
array1.push(...array2);
console.log(array1);

es5.js

'use strict';

var a = 'a';
(function () {
    console.log(a);
});
var array1 = [1, 2, 3, 4, 5],
    array2 = [2, 3, 4, 52, 6, 9];
array1.push.apply(array1, array2);
console.log(array1);

一个简单的基本的编译环境就OK了。

当然，网上还有很多的方法，比如在package.json里面加入执行命令。或者是配合gulp,webpack等来使用