create-react-app + typescript不使用browserslist。

Question

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

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

- webpack: ~4.29.6 - react: ~16.12.0 - typescript: ~3.7.2

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

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

1. 通过在 package.json 中添加 IE 9, chrome >20 等来更改 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的其他polyfills :(

问题：

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

- mixalbl4

Answer 1

我的主要错误：

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

在构建之前运行 rm -rf node_modules/.cache 会得到完全不同的结果。

create-react-app 项目中的 browserslist 只用于 *.js 文件吗？

不是的，它也适用于 *.ts / *.tsx。

目前是否没有办法在编译 TypeScript 项目时使用 browserslist 自动添加 polyfills？

默认情况下不包括 polyfills，需要使用 react-app-polyfill。 react-app-polyfill 文档：

您还可以填充稳定的语言特性，以补充目标浏览器中不可用的功能。如果您正在使用Create React App，则在导入稳定的填充时，它将自动使用您定义的browserslist，仅包含需要的填充来适配目标浏览器。

- mixalbl4