1.Babel 介绍
诞生背景
随着ES6的推进,我们开始逐渐使用ES6语法,但目前并非所有浏览器都支持ES6语法,为了将ES6转换为现有浏览器能理解的语法,Babel诞生了。
如果你还不是很了解ES与JS的关系,可看:JavaScript与ECMAScript的关系
介绍
Babel是一款js转码器,他将新版本的js语法标准转换为现阶段通用的js语法标准。在目前的情况下,可以简单认为Babel主要将ES6代码转为ES5代码。
下面我们简单举一个例子:
在ES6 里面我们可以这样写:
`[1,2,3].map(n => n + 1);`
利用Babel,我们可以将上面的代码转为ES5代码,结果如下:
[1,2,3].map(function(n) {
return n + 1;
});
其实Babel官网的Slogan就很好的阐释了它的作用:
>Use next generation JavaScript, today.
2.Babel 配置
使用Babel的方法有很多,你可以在官网查看Setup,在这里,我们使用babel-cli
工具用于命令行转码。步骤如下:
-
首先,我们需要在我们的项目中安装
babel-cli
,用命令行工具打开你的项目敲入:npm install --save-dev babel-cli
.稍后你能在你的package.json
中看到:{ "devDependencies": { "babel-cli": "^6.8.0" } }
-
接下来,我们在
package.json
中加入一下代码。这一段代码的作用就是当执行build
命令时运行babel src -d lib
,即将src文件夹中的文件通过babel转换的结果,放到lib文件夹中。"scripts": { "build": "babel src -d lib" },
由于在Babel6.x版本中你需要自己明确指出转码规则,Babel不再默认提供。因此,在命令行中运行
npm install babel-preset-es2015 --save-dev
,你也可以选择其他的转码规则。最后.babelrc文件告诉babel我们要用哪一个
preset
以及相应的插件。通过第三步我们明确了要使用"es2015"转码规则。因此,在命令行中输入echo '{"presets":["es2015"]}' > .babelrc
.可以看到在项目的.babelrc
中出现一下代码:{"presets":["es2015"]}
3. 实践
在配置完Babel之后,我们写一小段代码测试一下。我们在src/person.js
中写入以下代码:
class Person {
constructor(name) {
this.name = name;
}
greet(){
return this.name + ' says hello. ';
}
}
console.log(new Person("cindy").greet());
然后在命令行中运行npm run build
.可以看到lib/person.js
已经是ES5代码了。我们不用管经过Babel转换后最后输出的代码是什么样的,只用专注于用ES6写出的代码就行。
最后,我们在index.html
中引入lib/person.js
就能看到控制台中输出“cindy says hello.”
当把index.html
中引入的js文件的地址改为src/person.js
时,在Chrome控制台中仍能输出以上信息。因为部分浏览器已经支持ES6语法。你可以在这里查询浏览器支持情况。
4.总结
Babel是将下一代ES规则转为现在大多数浏览器所支持的ES规则的转换器。
通过命令行配置Babel的过程如下:安装-设置
scripts
-明确转码规则(preset
)-配置.babelrc
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。