支援的瀏覽器及功能

支援的瀏覽器

預設情況下，產生的專案支援所有現代瀏覽器。支援 Internet Explorer 9、10 和 11 需要多重填充。如需一組多重填充以支援較舊的瀏覽器，請使用 react-app-polyfill。

支援的語言功能

此專案支援最新 JavaScript 標準的超集。除了 ES6 語法功能外，還支援

• 指數運算子 (ES2016)。
• Async/await (ES2017)。
• 物件休息/散佈屬性 (ES2018)。
• 動態 import()（第 4 階段提案）
• 類別欄位和靜態屬性（第 3 階段提案的一部分）。
• JSX、Flow 和 TypeScript。

深入瞭解 不同的提案階段。

雖然我們建議謹慎使用實驗建議的寫法，但 Facebook 在產品程式碼中大量使用這些功能，因此如果未來這些建議有任何變更，我們打算提供 codemods。

請注意，預設情況下這個專案不包含任何 polyfills。

如果您使用任何其他需要執行時期支援（例如 Array.from() 或 Symbol）的 ES6+ 功能，請務必 手動納入適當的 polyfills，或者您要鎖定的瀏覽器已經支援這些功能。

設定支援的瀏覽器

預設情況下，已建立的專案會在您的 package.json 檔案中包含一個 browserslist 設定，用於針對廣泛的瀏覽器，根據生產建構的全球使用情況（> 0.2%），以及現代的開發瀏覽器。這提供良好的開發體驗，特別是在使用語言功能（例如非同步/等待）時，但仍讓許多瀏覽器在生產環境中維持高度相容性。

browserslist 設定控制輸出 JavaScript，讓發射的程式碼相容於指定的瀏覽器。在執行 build 指令製作生產建構時，將使用 production 清單；在執行 start 指令時，則會使用 development 清單。您可以使用 https://browserl.ist 觀看由您設定的 browserslist 支援的瀏覽器。

以下是 package.json 中指定的範例 browserslist

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

請注意，這不會自動為您包含 polyfills。您仍需要根據您支援的瀏覽器，針對語言功能（見上文）填入 polyfill。

當編輯 browserslist 設定時，您可能會發現變更並未立即套用。這是由於 babel-loader 中有一個問題，無法偵測到 package.json 中的變更。一個快速解決方式是刪除 node_modules/.cache 資料夾並重試。