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

Question

太棒了；如何配置我的 CRA 项目，以便生成yarn start与旧版浏览器兼容的版本？

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

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

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

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

显然，我非常不熟悉 TypeScript 和 CRA（听 Babel）如何协同工作。我尝试检查 CRA 的源代码，并弹出应用程序来猜测为什么我的尝试不起作用，但我迷失了。

（请注意，该项目是几天前根据 CRA 的 TypeScript 模板创建的，因此它确实是最新的。）

Answer 1

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

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

支持的浏览器