babel实践

Posted HelloHello233

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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,也就不会报错了。

以上是关于babel实践的主要内容,如果未能解决你的问题,请参考以下文章

babel实践:真实gulp项目支持ES6转译ES5的跳坑指北

逆向及Bof基础实践

更新片段参数的最佳实践?

在片段和活动之间进行通信 - 最佳实践

android片段-数据传递-最佳实践[重复]

20155201 李卓雯 《网络对抗技术》实验一 逆向及Bof基础