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加载

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就悲剧了~~

完！！