4

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工具用于命令行转码。步骤如下:

  1. 首先,我们需要在我们的项目中安装babel-cli,用命令行工具打开你的项目敲入:npm install --save-dev babel-cli.稍后你能在你的package.json中看到:

    {
      "devDependencies": {
        "babel-cli": "^6.8.0"
      }
    }
  2. 接下来,我们在package.json中加入一下代码。这一段代码的作用就是当执行build命令时运行babel src -d lib,即将src文件夹中的文件通过babel转换的结果,放到lib文件夹中。

     "scripts": {
      "build": "babel src -d lib"
     },
  3. 由于在Babel6.x版本中你需要自己明确指出转码规则,Babel不再默认提供。因此,在命令行中运行npm install babel-preset-es2015 --save-dev,你也可以选择其他的转码规则。

  4. 最后.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

5. 参考资料


Yawenina
2.3k 声望117 粉丝