学习babel

作者 likaiqiang 日期 2017-03-05
学习babel

babel学习之旅

众所周知,es6的到来给javascript带来了许多新的特性,例如数组的find、findIndex、form方法,object.assign()方法等等(还有arrow function),这些都极大的提高了我们的开发效率,然而兼容性是个大问题。

如果你用的Node,兼容性当我没说,Node原生支持ES6。

服务器端配置babel(参考阮一峰的Es6)

全局安装babel-cli

npm install babel-cli -g

局部安装项目中所用babel转换规则

配置.babellrc文件

  {
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}

presets 里面对应本地安装的babel转换规则

执行转义

babel a.js -o b.js  //a.js(源文件)=>b.js(转义后的文件)

这种方法适合简单的demo练习,更多方法参见 阮一峰ES6

浏览器端配置

babel从6.0开始不再提供浏览器版本,然而可以用babel 5.X,首先引入babel-core

可以使用 npm 安装

npm install babel-core@5

然后引入页面

<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

也可以直接使用cdn加载

http://cdn.bootcss.com/babel-core/5.4.3/browser.js

babel-polyfill

Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

当然Node是原生支持Es6的,此处略过

服务器端安装

在项目的根目录下局部安装babel-polyfill,当然,前提是要安装babel

npm install --save babel-polyfill

然后就可以用 inport 或者 requireJs 很爽的用它了

浏览器端

古老的技术总有其存在的价值,直接引入 babel-polyfill ,前提是先引入 babel

<script src='http://cdn.bootcss.com/babel-polyfill/6.9.1/polyfill.js'></script>

我们就可以在浏览器上很爽的使用ES6的语法,而不用考虑兼容性问题了。

引入 babel 和 babel-polyfill

p{1}*20

chrome

fixfox

IE 9

作为对比,不引 babel 与 babel-polyfill

chrome

fixfox

IE9

虽然chrome与fixfox依然坚挺,但是IE就悲剧了~~

完!!