将ES6的语法转为ES5（为了兼容 ES5） (Babel)

语法转为ES5（为了兼容 ES5） (Babel)"/>

将ES6的语法转为ES5（为了兼容 ES5） (Babel)

掌握 ES6 之后，如果你的业务需要考虑 ES5 的兼容性，则可以这样做：写 ES6 语法的 js 代码，然后通过 Babel将 ES6 转换为 ES5。如果没有这样的需要，那么下面的内容，了解即可。

babel 的作用是将 ES6 语法转为 ES5 语法，支持低端浏览器。

以一个简单的案例说明

1. 先创建一个项目的目录

在 index.js 写入

let a = item => item + 2
console.log(a(4))

这个文件是一个 ES6 语法 的 js 文件，稍后，我们尝试把这个 ES6 语法的 js 文件转化为 ES5 的 js 文件。

// 本地安装 babel-preset-es2015 和 babel-cli：
npm install --save-dev babel-preset-es2015 babel-cli

2. 安装 Babel-cli

初始化项目：

在安装 Babel 之前，需要先用 npm init 先初始化我们的项目。打开终端或者通过 cmd 打开命令行工具，进入项目目录，输入如下命令：

	npm init -y

上方代码中，-y 代表全部默认同意，就不用一次次按回车了（稍后再根据需要，在文件中手动修改）。命令执行完成后，会在项目的根目录下生成 package.json 文件：

{"name": "babel","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}

3. 本地安装 babel-preset-es2015 和 babel-cli：

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

4. 新建.babelrc：

在根目录下新建文件.babelrc，输入如下内容：

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

5. 开始转换：

现在，我们应该可以将 ES6 的文件转化为 ES5 的文件了，命令如下：（此命令略显复杂）

	babel src/index.js -o dist/index.js

我们可以将上面这个命令进行简化一下。操作如下：

在文件 package.json 中修改键 scripts中的内容：

  "scripts": {"build": "babel src/index.js -o dist/index.js"},

目前为止，环境配置好了。以后，我们执行如下命令，即可将src/index.js这个 ES6 文件转化为 dist/index.js这个 ES5 文件：

	npm run build

我们执行上面的命令之后，会发现， dist 目录下会生成 ES5 的 js 文件：

之后我们就可以在 index.html 中使用 es5的语法了

"use strict";var a = function a(item) {return item + 2;
};
console.log(a(4));