前端初学者很多人都会在JavaScript(js)和EMCAScript(es)这块懵逼.我也是,其实我的理解很简单ES是一套规范,而js是这一套规范的实践,但是又由于各个来浏览器对es的支持不一样,有的浏览器支持了es比较新的特性,比如说chrome仅仅支持了ES6中的某个特性.但是chrome肯定支持es5的所有特性,所以我们在写js的时候肯定不能写最新的语法特性啊.因为浏览器不支持啊.但是新特性写起来那么爽,不写写特性怎么出去装逼呢…哈哈哈.还好有了babel这个工具.有了这个工具我们就可以写新特性,然后用它来转换成新特性代码.

实现你要使用npm来安装一下babel这个终端工具.

1
2

#在终端中运行下面命令,其中-g参数是在全局系统中安装babel
npm install -g babel-cli

安装完成之后就可以在终端中通过 babel --version 来查看babel的版本号了.
接下来要安装babel的一些转换插件,也就是要将目标代码转成那种代码,而我们的babel只是一个转换工具,需要一套规则来转换,接下来安装的插件就是一套规则.

1

npm install --save babel-preset-es2015

上面的命令会在终端当前目录下生成一个node_modules文件夹,并且会把下载下来的插件放倒这个文件夹中,而 —save 参数会把下载的这个插件保存到package.json这个配置文件中去.
这样我们的转换规则也下好了.当然我们还可以下载其他的规则.比如:babel-preset-react(jsx语法转换),babel-preset-stage-0(es7_1),babel-preset-stage-1(es7_1)等等.

接下来就可以利用babel进行代码转换了.

先写一段支持ES6的代码

1
2
3
4
5
6
7

# a.js
# let 是ES6中才支持的语法
for(let i = 0; i < 10; i++){
    console.log(i)
}
# 箭头函数也是在ES6中才可以使用的.
let b = (x,y) => x + y;

然后我们通过根据转成标准模式的代码
在终端中执行下面代码

1

babel a.js --presets es2015

—presets 后面跟指定的转换规则,可以理解为指定当前a.js是es2015的代码,然后要把a.js转换成标准模式.
转换的结果(直接显示在终端):

1
2
3
4
5
6
7
8

'use strict';

for (var i = 0; i < 10; i++) {
    console.log(i);
}
var b = function b(x, y) {
    return x + y;
};

当然,我们可以给转换后的代码指定一个写入地址

1
2

# -o 目标地址
babel a.js -o b.js --presets es2015

还没结束.

每次输入命令带一堆参数太麻烦哦…
我们可以新建一个配置文件来配置一下转换规则.
在目标目录下新建一个.babelrc文件

1
2
3
4
5
6

# .babelrc
{
    "presets":[
        "es2015"
    ]
}

接下来,执行在终端中转换代码只需要->

1

babel a.js -o b.js

就ok了.是不是很轻松了.

最后

有了babel,我们就可以很愉快的使用ES6或者ES7的新特性了,不用管是否兼容了.反正babel会帮我们搞定兼容问题了.是不是很酷!!!

通过这个工具可以看到前端技术中很多地方都会用到各种各样的工具,而且很多东西都是可以通过配置文件来工作.所以学会终端和配置各种各样的环境,对于一个FEer很重要重要,所以生命不息,学习不止!!!