create-react-app 创建的项目,支持的浏览器版本
支持的浏览器
默认情况下,生成的项目支持所有现代浏览器。
对 Internet Explorer 9、10 和 11 的支持需要 polyfill。
如果你需要支持IE9/10/11,请使用 react-app-polyfill。
支持的语言功能
该项目支持最新 JavaScript 标准的超集。
除 ES6 语法功能外,它还支持:
- 指数运算符 (ES2016).
- Async/await (ES2017).
- Object Rest(剩余)/Spread(展开) 属性 (ES2018).
- 动态 import() (stage 4 proposal)
- Class 字段和静态属性 (part of stage 3 proposal).
- JSX, Flow and TypeScript.
详细了解请参考不同JS提案阶段。
尽管我们建议谨慎使用实验性建议,但 Facebook 会在产品代码中大量使用这些功能,因此,如果将来这些建议中的任何更改,我们打算提供 codemod。
默认不包含 polyfill
请注意,默认情况下,该项目不包含任何 polyfill
。
如果您使用任何其他需要运行时支持的 ES6+
功能(例如 Array.from()
或 Symbol
),请确保手动添加 polyfill,或者您所针对的浏览器已经支持它们。
配置支持的浏览器
默认情况下,您生成项目的package.json文件中包含一个browserslist配置,以针对基于全球使用大于0.2%
的浏览器(用于生产构建)和用于开发的现代浏览器。
这提供了良好的开发体验,尤其是在使用诸如async/await
之类的语言功能时,但仍与生产中的许多浏览器保持高度兼容性。
该 browserslist
配置控制输出的 JavaScript,以使发出的代码与指定的浏览器兼容。
该 production
列表将在通过运行 build 脚本创建生产版本时使用,而该 development
列表将在运行 start 脚本时使用。
您可以使用 https://browserl.ist 查看您配置的所支持的浏览器
browserslist
。
这是在 browserslist
中指定的示例 package.json
:
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
请注意,这不会自动为您包括 polyfills。您仍然需要根据所支持的浏览器来添加语言功能(请参见上文)。
在编辑 browserslist
配置时,您可能会注意到您的更改不会立即生效。
这是由于 babel-loader 中的一个问题未检测到您的更改 package.json。快速解决方案是删除 node_modules/.cache
文件夹,然后重试。