初识 Babel

Posted on Edited on In

Babel 的作用

由于 javascript 语言再不断的发展， 通常来讲语言的新特性会提高开发人员的效率，也更友好和容易使用。但是可能出现浏览器不支持的情况。 为了解决这个问题我们可以使用 babel 对代码进行转译，使之成为浏览器支持的旧版本的 javascript 代码。

总结起来就一句话： “让我们可以自由的使用下一代的 javascript”

babel 7 支持转换为特定的版本，可以在 .babelrc 中指定

1
{ "presets": ["es2015"] }

babel 还可以将 TypeScript 和 Flow 等转换为 js

利用 babel 暴露的Api 还可以用来函数插桩、和自动国际化.

故事

babel 这个词来源于圣经故事，不同语言的人。在故事中，一群说着同一种语言的人决定建造一座可以到达天堂的塔。上帝看到他们的骄傲和想要像他一样的欲望，导致他们说不同的语言，因此他们无法互相理解，也无法完成他们的塔。

基本流程

源码本质上是字符串, 所以 babel 也可以说是对字符串的处理. 这种字符串之间的转换大概包括三个阶段：

  1. parse phase(解析阶段)
    Babel 会使用 JavaScript 引擎的语法分析器来解析代码，将其转换为一种内部表示形式（通常是一个抽象语法树(AST))。
  2. transform (转换阶段)
    Babel 会使用一系列插件来转换代码。这些插件可以用来添加新的语言特性，修改现有特性的行为，或者移除不支持的特性。
  3. generate(生成阶段)
    最后，Babel 会将转换后的代码转换为 JavaScript 代码，并输出结果。同时生成 sourceMap, 即源码和生成代码之间的关系。