使用 babel 将 ES6 转换为 ES5

 

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

Babel 主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

一、安装 babel：

安装前需要电脑已安装node。

需要局部安装 babel-cli ，不要全局安装babel，如果全局安装时，那么意味着项目在其他环境运行时必须已安装babel，另外也无法给每个项目配置不同版本的bablel:

npm install babel-cli --save-dev

二、预设转码规则：

需要安装转换规则插件：

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

还支持对react的语法转换：

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

ES7不同阶段语法转换规则,（共四个阶段）：

npm install babel-preset-stage-0 --save-dev

npm install babel-preset-stage-1 --save-dev

npm install babel-preset-stage-2 --save-dev

npm install babel-preset-stage-3 --save-dev

 

安装完成后需要新建 .babelrc 文件进行配置转换规则：

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

pugins 为babel的插件配置，presest 为babel的转换规则配置，当前配置转换规则为 es2015。

 

三、实践（转换示例）：

新建一个index.js文件，编写内容如下（典型的es6语法）用于转换为es5：

let name = '小书包';
let test = ()=>{
    console.log(name)
};

下面开始转换（将index.js的代码转换为es5输出到build.js文件）：

babel index.js -o build.js

也可以批量转换（注意中间是 -d ）

babel 源文件目录 -d 输出目录

build.js文件内容如下（转化后的代码）：

'use strict';

var name = '小书包';
var test = function test() {
    console.log(name);
};

转换已完成！

babel 也可以搭配其他构建工具。如：webpack、gulp、grunt。

 

四、局部安装可能存在的问题（babel既不是系统命令也不是外部命令）：

那是因为系统没有找到babel.cmd文件。

其实babel.cmd文件可以在项目目录下的 node_module\.bin\目录下：

既然知道了路径，那么我们在使用命令之前写上路径就可以执行了，如下：

node_modules\.bin\babel index.js -o build.js

但是我们每次执行都加上这么一句前缀，是非常的麻烦，那么我们可以通过自定义脚本命令去简化我们的 操作：

可已在package.json文件中添加脚本命令：

注意：自定义命令时，输入的路径存在 "\." 、"\n”、 "\b"时，会被认为是转义符，所以需要在前面加个斜杠 "\"，进行反转义。

配置完成脚本命令后。通过   "npm run 自定义的脚本名称"   的方式执行：

npm run babel

以上命令相当于执行了：

node_modules\.bin\babel index.js -o build.js

这样就简化了操作。