你被「caniuse」骗了吗？浅谈 Babel 的编译决策之 compact-table

前端

2022-12-14 15:55:07

Babel 转译：为什么它会转译 caniuse 兼容的代码？

Babel 的转译策略

在前端开发中，Babel 是一款强大的工具，可将现代 JavaScript 代码转译为较低版本的 JavaScript，以确保浏览器兼容性。其转译策略是检测浏览器对特定语法特性的支持情况，并根据此信息确定是否转译该语法特性。

caniuse 的局限性

我们通常使用 caniuse 网站查询浏览器的兼容性。但是，有时你会发现一个奇怪的现象：caniuse 明明显示某个语法特性兼容，但 Babel 却依然对其进行转译。这是怎么回事呢？

这是因为 Babel 在检测浏览器兼容性时，并不直接查询 caniuse，而是根据一个名为 compact-table 的数据结构来判断。

compact-table：Babel 的浏览器支持数据源

compact-table 是一个数据结构，由 Babel 团队根据 caniuse 的数据整理而成。它包含了所有浏览器对不同语法特性的支持情况。其结构如下：

{
  "语法特性": {
    "浏览器": {
      "版本": "支持情况"
    }
  }
}

例如，对于 箭头函数 这个语法特性，compact-table 中的数据如下：

{
  "箭头函数": {
    "Chrome": {
      "51": "支持"
    },
    "Firefox": {
      "45": "支持"
    },
    "Safari": {
      "10": "支持"
    },
    "Edge": {
      "12": "支持"
    },
    "IE": {
      "11": "不支持"
    }
  }
}

从这个数据中我们可以看出，箭头函数在 Chrome、Firefox、Safari 和 Edge 浏览器中都是支持的，但在 IE 浏览器中是不支持的。

Babel 的转译决策

当 Babel 检测浏览器的兼容性时，它首先查询 compact-table。如果发现目标浏览器对某个语法特性不支持，则会对该语法特性进行转译。

因此，即使 caniuse 显示某个语法特性兼容，但如果 Babel 发现目标浏览器对该语法特性不支持，依然会进行转译。

这是因为 Babel 的转译策略是基于浏览器的实际支持情况，而不是 caniuse 的数据。caniuse 的数据可能存在滞后性，或者可能存在不准确的情况。因此，Babel 团队决定根据 caniuse 的数据整理出一个更加准确的数据结构，即 compact-table，来作为 Babel 转译决策的依据。

compact-table 的优势

compact-table 的使用使得 Babel 的转译决策更加准确和可靠。但是，这也意味着 Babel 可能有时候会对一些 caniuse 显示兼容的语法特性进行转译。

如何查看 Babel 的转译决策

如果你发现 Babel 对某个 caniuse 显示兼容的语法特性进行了转译，你可以通过查询 compact-table 来了解原因。compact-table 的数据是公开的，你可以在 Babel 的官方文档中找到它。

结论

Babel 的转译策略是基于浏览器实际支持情况的。即使 caniuse 显示某个语法特性兼容，但如果 Babel 发现目标浏览器对该语法特性不支持，依然会进行转译。这是为了确保代码在目标浏览器中正确运行。

常见问题解答

1. 为什么 caniuse 的数据可能存在滞后性或不准确？

caniuse 的数据是通过收集用户代理数据和人工测试获得的。因此，它可能会滞后于浏览器实际支持情况，或者存在一些不准确之处。

2. compact-table 数据从哪里来？

compact-table 数据是 Babel 团队根据 caniuse 的数据整理而成的。它包含了所有浏览器对不同语法特性的支持情况。

3. 如何查看 compact-table 数据？