在开发模式下使用 Create-React-App 配置 TypeScript 目标

Question

tldr; 如何配置我的 CRA 项目以使 yarn start 生成与旧浏览器兼容的构建？

不确定我做错了什么，但我基本上是在使用 TypeScript 和 CRA，并且想在旧版 Chrome 上运行开发版本。准确地说，它是在智能电视上运行的 Chrome 53。由于我正在开发一个可以在电视上运行的应用程序，并且想在我现有的应用程序上进行测试，因此运行与该电视兼容的版本至关重要。

当我在电视上运行当前开发版本时，浏览器抱怨语法错误。可能是因为构建中包含的高级 JS 功能（箭头函数、const、...）。

所以我做的第一件事是将tsconfig.json 更新为目标es3，而不是它当前所在的位置：es5。我没想到这会有所作为，因为 ES5 显然应该在 Chrome 53 上运行良好。

然后，我尝试自定义 package.json 中的 browserlist 以包含该版本的 Chrome，甚至将生产设置复制到开发设置，但无济于事。当我检查桌面上生成的 JavaScript 时，它仍然包含 ES6 功能。

显然，我对 TypeScript 和 CRA（听 Babel）如何协同工作非常陌生。我试图检查 CRA 的源代码，并弹出应用程序以解释我的尝试不起作用，但我迷路了。

（请注意，该项目是几天前从 CRA 的 TypeScript 模板创建的，所以它真的是最新的。）

Answer 1

好吧，事实证明问题比看起来要容易。修改package.json后需要清空npm缓存。我承认我没有注意到文档中提到这一点。

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

Supported browsers