向前端架构师迈出一小步

们了解Babel的底层能力后，接下来看看基于这些能力，上层能实现什么功能?

Babel的上层能力

基于Babel对JS代码的编译处理能力，Babel最常见的上层能力为：

• polyfill
• DSL转换(比如解析JSX)
• 语法转换(比如将高级语法解析为当前可用的实现)

由于篇幅有限，这里仅介绍polyfill与「语法转换」相关功能。

polyfill

作为前端，最常见的Babel生态的库想必是@babel/polyfill与@babel/preset-env。

使用@babel/polyfill或@babel/preset-env可以实现高级语法的降级实现以及API的polyfill。

从上文我们知道，Babel本身只是JS的编译器，以上两者的转换功能是谁实现的呢?

答案是：core-js

core-js简介

core-js是一套模块化的JS标准库，包括：

• 一直到ES2021的polyfill
• promise、symbols、iterators等一些特性的实现
• ES提案中的特性实现
• 跨平台的WHATWG / W3C特性，比如URL表：非IE11的版本以及所有Node.js基金会维护的版本。

  @babel/polyfill与core-js关系

  @babel/polyfill可以看作是：core-js加regenerator-runtime。

  • regenerator-runtime是generator以及async/await的运行时依赖

  单独使用@babel/polyfill会将core-js全量导入，造成项目打包体积过大。

  • 从Babel v7.4.0[5]开始，@babel/polyfill被废弃了，可以直接引用core-js与regenerator-runtime替代

  为了解决全量引入core-js造成打包体积过大的问题，我们需要配合使用@babel/preset-env。

  preset的含义

  在介绍@babel/preset-env前，我们先来了解preset的意义。

  初始情况下，Babel没有任何额外能力，其工作流程可以描述为：
  

（编辑：甘孜站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!