什么是babel

Posted on

翻译链接： https://babeljs.io/docs/en/

Javascript的编译器

babel是一个工具链。它经常用在将ECMAScript 2015+代码转化成向后兼容JS版本代码，运行在老的浏览器或环境中。下面几个是babel主要能做的事情：

  • 语法转化
  • 通过@babel/polyfill填充不满足目标环境的功能。
  • 源码转化
  • 其它（查看）视频
1
2
3
4
5
6
7
// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

更精彩的材料，可以查看the-super-tiny-compiler，这个会在一个比较高的层面上解释Babel。

ES2015 和 ES2015+

Babel支持JS最新版本的语法转化。这些插件允许你在不考虑浏览器是否支持的情况下，直接使用最新的语法。请查看使用文档

JSX 和 React

Babel也可以转化JSX语法（详情）。React preset 和 babel-sublime连用，可以将语法高亮，从而带来全新的体验。

类型注释（Flow 和 Typescript）

Babel可以将你的类型注释剥离出去。具体查看flow preset和typescript preset。当时Babel是不会去做类型检查的。你仍然需要安装flow或者typescript来辅助你检查类型。

了解更多flow和typescript

可拔插

Babel是建立在插件之外的。也就是说，你可以利用现有的插件或者自己写的插件，来组件出一个转化流水线出来。Bable提供的preset可以帮助你使用插件集。
我们可以通过在线的方式创建插件：astexplorer.net。或者使用插件generator-babel-plugin创建插件模板。

1
2
3
4
5
6
7
8
9
10
11
// A plugin is just a function
export default function ({types: t}) {
  return {
    visitor: {
      Identifier(path) {
        let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name.split('').reverse().join('');
      }
    }
  };
}

可调试

sourcemap可以帮助你调试你的代码。

符合规范

Babel会尽量保持和ECMA标准统一。同样，Babel会有一些额外的选项，做为性能的一个权衡。

紧凑

Babel尝试使用尽量少的代码，而不依赖于庞大的运行时。
在案例中，这个可能很难做到。babel有”loose”选项提供给我们，做为特殊的转化。从而在可读性上，文件大小上，和速度上达到一个权衡。

总结