我在查看Babel的文档@babel/preset-env时,注意到了这条注解:
请注意,如果您依赖于browserslist的默认查询(显式地或通过没有browserslist配置),您将需要查看No targets部分以了解有关preset-env行为的信息。
这是引用的“无目标”部分的摘录。
未指定目标时:Babel会假设您的目标浏览器是最旧的浏览器。例如,@babel/preset-env会将所有ES 2015-ES 2020代码转换为ES 5兼容。
正因为如此,Babel的行为与browserslist不同:如果在Babel或browserslist配置中找不到目标,它就不会使用默认查询。如果你想使用默认查询,你需要明确地将它作为目标传递:
这句话让我很困惑:* “当在Babel或browserslist配置中找不到目标时,它不会使用默认查询**(s)**"*.如果.browserslistlrc
中有默认查询,这难道不意味着browserslist配置中有一个目标吗?.browserslistrc
文件的全部意义不就是有一个集中的位置来引用目标浏览器吗?维护两个独立的位置似乎容易出错。
我决定进行调查,并打开了Babel的debug
标志。此时,我的.babelrc
文件没有列出任何显式目标,而我的.browserslistrc
只列出了defaults
。运行Babel时,我在终端中得到了以下输出:
Using targets:
{}
当我向.babelrc
添加一个显式的"targets": "defaults"
时,输出发生了变化,现在列出了目标浏览器:
Using targets:
{
"android": "84",
"chrome": "83",
"edge": "84",
"firefox": "78",
"ie": "11",
"ios": "12",
"opera": "70",
"safari": "13.1",
"samsung": "11.1"
}
更让我困惑的是,这个列表与运行npx browserslist defaults
时browserslist报告的defaults
不匹配:
and_chr 97
and_ff 96
and_qq 10.4
and_uc 12.12
android 97
baidu 7.12
chrome 98
chrome 97
chrome 96
edge 98
edge 97
edge 96
firefox 96
firefox 95
firefox 91
firefox 78
ie 11
ios_saf 15.2-15.3
ios_saf 15.0-15.1
ios_saf 14.5-14.8
ios_saf 14.0-14.4
ios_saf 12.2-12.5
kaios 2.5
op_mini all
op_mob 64
opera 83
opera 82
safari 15.2-15.3
safari 15.1
safari 14.1
samsung 16.0
samsung 15.0
如果您将defaults
browserslist查询与@babel/preset-env
一起使用,有谁能澄清一下这里发生了什么,并推荐一个最佳实践吗?
1条答案
按热度按时间vu8f3i0k1#
这是巴别塔7的一个已知问题:
https://github.com/babel/babel/issues/10965
关闭此项目,将其作为#9962的副本,并在#10897中修复。但是,我们不能在巴别塔8之前发货,因为这是一个突破性的更改。
作为一种解决方案,您可以在
targets.browsers
中重新指定defaults
。我们认识到这并不理想,但无法在Babel 7中发布,因为我们正在更改默认选项的行为。在巴别塔8发布之前,有一个建议的解决方案:
对于那些在同一个问题上遇到困难的人,我通过“显式”默认值来解决它。这意味着我把
> 0.5%, last 2 versions, Firefox ESR, not dead
放在我的.browserslist
文件中。工作正常。