0

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

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

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

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

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

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

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

4

1 回答 1

1

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

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

支持的浏览器

于 2020-03-05T02:52:48.643 回答