create-react-app + typescript 不使用 browserslist

Question

create-react-app 默认使用browserslist，但我认为它仅适用于*.js 文件（我不太确定），对于*.ts 没有区别。

我的环境（由create-react-app生成）：

• webpack：~4.29.6
• 反应：~16.12.0
• 打字稿：~3.7.2

项目代码仅包含*.ts / *.tsx 文件。

我尝试通过以下方式添加Object.entries polyfill：

1. 通过添加IE 9、chrome >20 等来更改package.json 中的browserslist - 但无济于事（dist 未更改）
2. 将 tsconfig.json 中的 compilerOptions.target 更改为 es5 - 但无济于事（dist 未更改）
3. 在tsconfig.json 中添加compilerOptions.lib 新值：es5、es6、es7 等... - 但无济于事（dist 未更改）

只添加import 'react-app-polyfill/stable'; 给我Object.entries polyfill，但有大约 600kb 的其他 polyfill :(

问题：

1. create-react-app 项目中的browserslist 是否仅用于*.js 文件？
2. 目前是否没有办法使用browserslist 自动添加polyfills 来编译TypeScript 项目？
3. browserslist 对 TypeScript 项目完全没用吗？

Answer 1

我的主要错误：

在编辑 browserslist 配置时，您可能会注意到您的更改不会立即生效。这是由于issue in babel-loader 没有检测到您的 package.json 中的更改。一个快速的解决方案是删除 node_modules/.cache 文件夹并重试。

rm -rf node_modules/.cache 在构建之前给出完全不同的结果。

create-react-app 项目中的 browserslist 是否仅用于 *.js 文件？

不，这也适用于 *.ts / *.tsx。

目前有没有办法使用 browserslist 来自动添加 polyfill 来编译 TypeScript 项目？

Polyfills 默认不包含，需要使用react-app-polyfill

react-app-polyfill文档：

您还可以填充目标浏览器中不可用的稳定语言功能。如果你在 Create React App 中使用它，它会自动使用你定义的浏览器列表，只包含目标浏览器需要的 polyfills 来导入稳定的 polyfill。