babel实践

 

如今的主流浏览器尚未彻底兼容ES6的语法，如ie11就不支持箭头函数。

使用过es6的人都知道，es6更加简洁和强大，但是使用es6写出来的代码并不能获得全部主流js引擎的支持，针对这一点，一个解决方案就是使用babel这个工具。

babel是一个js处理器，能够对js代码进行转换，能够转换jsx、es6代码等。这里咱们使用它来把es6代码转为es5代码。

有以下js代码：

let add = item => item + 1
console.log(add(1));

以上代码能够在chrome61 和 node 6.11 下执行，对于ie11，则运行报错。

首先安装babel指令：

npm install -g babel-cli

接着再安装一个咱们须要用到的babel转换规则（把js代码转为es5）：

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

通知babel去应用这个规则，咱们要在项目的根目录添加一个 .babelrc 文件：

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

以上三个步骤完成后，能够开始进行转换了。执行：

babel -d dist/ index.js

以上会把index.js文件转换的代码存放在当前目录的dist目录下。转换结果：

let add = item => item + 1
console.log(add(1));

// after convert :


"use strict";

var add = function add(item) {
  return item + 1;
};
console.log(add(1));

转换后的代码能够在ie11中运行了。

---

 以上这个小例子明白后，来看看第二个例子。

class Person {
    constructor( name ) {
        this.name = name;
    }
    sayHello() {
        return `Hello ${ this.name }!`;
    }
    sayHelloThreeTimes() {
        let hello = this.sayHello();
        console.log(`${ hello } `.repeat(3));
    }
}
new Person('ben').sayHelloThreeTimes()

　　这段代码一样没办法直接在ie11上运行，对这段代码进行相似第一个例子中的转换后，依然没法运行，提示以下：对象不支持“repeat”属性或方法 

　　这里有很重要的一点值得关注，babel 中的  babel-preset-es2015 这条规则只会转换语法，却不会转换新的api 。而以上的字符串repeat方法是es6新增的api，ie11不支持这个特性，就报错了。

　　使浏览器支持新的api。这个需求很经常使用，一般的解决办法就是使用垫片库（polyfill），而在babel生态里边就有对应的垫片库，叫作babel-polyfill。首先下载：

npm install --save babel-polyfill

　　下载好了以后，使用这个垫片库有两种方式：

// 使用方式1：在新api所在的js中引入这个模块，以下：
import 'babel-polyfill';

// 使用方式2：在html的头部引入
<script src="node_modules/babel-polyfill/dist/polyfill.js"></script>

　　能够这么理解，只要这个库被引入了，它就会自动往对应对象的原型上添加新api的定义，这样后续你直接在js中使用新的api，也就不会报错了。

虽然以上例子中的代码只有十多行，可是查看编译后的代码，能明显感受到稍微复杂了一些

对于这样的代码感受无法调试啊，里面的代码和本身写的代码都不同的。解决办法是使用sourceMap，这个功能能将原来的代码与编译后的代码进行关联，虽然运行的是编译后的代码，可是里面代码的相对执行次序会反映到原来的代码上。在编译时多加一个参数：

babel -d dist/ index.js --source-maps

从新访问页面，调试窗口多出来一个文件，是能够在里面打断点进行调试的：

里面的代码就是编译前的代码了