From f4f20a20d095c7ea97191292e9d17753ff24596a Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Thu, 14 Mar 2019 12:16:09 -0700 Subject: [PATCH] Support browserslist in @babel/preset-env (#6608) * Add browserslist support to @babel/preset-env * Support @babel/polyfill in entry point --- .../docs/supported-browsers-features.md | 33 ++++++++++++++++++- packages/babel-preset-react-app/create.js | 13 ++------ packages/react-dev-utils/browsersHelper.js | 14 ++++---- packages/react-scripts/package.json | 18 ++++++---- 4 files changed, 54 insertions(+), 24 deletions(-) diff --git a/docusaurus/docs/supported-browsers-features.md b/docusaurus/docs/supported-browsers-features.md index a8e0875c355..d2add48197a 100644 --- a/docusaurus/docs/supported-browsers-features.md +++ b/docusaurus/docs/supported-browsers-features.md @@ -6,7 +6,7 @@ sidebar_label: Supported Browsers and Features ## Supported Browsers -By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires [polyfills](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md). +By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills. For a minimum set of polyfills to support older browsers, use [react-app-polyfill](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md). To polyfill other language features, see the [Adding Polyfills](#adding-polyfills) section below ## Supported Language Features @@ -26,3 +26,34 @@ While we recommend using experimental proposals with some caution, Facebook heav Note that **this project includes no [polyfills](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md)** by default. If you use any other ES6+ features that need **runtime support** (such as `Array.from()` or `Symbol`), make sure you are [including the appropriate polyfills manually](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md), or that the browsers you are targeting already support them. + +## Adding Polyfills + +You can install [`@babel/polyfill`](https://babeljs.io/docs/en/babel-polyfill) as a dependency in your application, and import it at the very top of your app's entry point (`src/index.js` or `src/index.tsx`) to emulate a full ES2015+ environment. Your `browerslist` configuration will be used to only include the polyfills necessary by your target browsers. + +## Configuring Supported Browsers + +By default, the generated project includes a [`browerslist`](https://github.com/browserslist/browserslist) configuration in your `package.json` file to target a broad range of browsers based on global usage (`> 0.2%`) for production builds, and modern browsers for development. This gives a good development experience, especially when using language features such as async/await, but still provides high compatibility with many browsers in production. + +The `browserslist` configuration controls the outputted JavaScript so that the emitted code will be compatible with the browsers specified. The `production` list will be used when creating a production build by running the `build` script, and the `development` list will be used when running the `start` script. You can use [https://browserl.ist](https://browserl.ist/?q=%3E+0.2%25%2C+not+dead%2C+not+op_mini+all) to see the browsers supported by your configured `browserslist`. + +Here is an example `browserslist` that is specified in `package.json`: + +```json +"browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] +} +``` + +> Note that this does not include polyfills automatically for you. You will still need to polyfill language features (see above) as needed based on the browsers your are supporting. + +> When editing the `browerslist` config, you may notice that your changes don't get picked up right away. This is due to an [issue in babel-loader](https://github.com/babel/babel-loader/issues/690) not detecting the change in your `package.json`. An easy solution is to delete the `node_modules/.cache` folder and try again. diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index a0423f2551c..9bc702d7eec 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -79,17 +79,8 @@ module.exports = function(api, opts, env) { // Latest stable ECMAScript features require('@babel/preset-env').default, { - // We want Create React App to be IE 9 compatible until React itself - // no longer works with IE 9 - targets: { - ie: 9, - }, - // Users cannot override this behavior because this Babel - // configuration is highly tuned for ES5 support - ignoreBrowserslistConfig: true, - // If users import all core-js they're probably not concerned with - // bundle size. We shouldn't rely on magic to try and shrink it. - useBuiltIns: false, + // Allow importing @babel/polyfill in entrypoint and use browserlist to select polyfills + useBuiltIns: 'entry', // Do not transform modules to CJS modules: false, // Exclude transforms that make all code slower diff --git a/packages/react-dev-utils/browsersHelper.js b/packages/react-dev-utils/browsersHelper.js index b32879944ab..a52ed342736 100644 --- a/packages/react-dev-utils/browsersHelper.js +++ b/packages/react-dev-utils/browsersHelper.js @@ -13,12 +13,14 @@ const inquirer = require('inquirer'); const pkgUp = require('pkg-up'); const fs = require('fs'); -const defaultBrowsers = [ - '>0.2%', - 'not dead', - 'not ie <= 11', - 'not op_mini all', -]; +const defaultBrowsers = { + production: ['>0.2%', 'not dead', 'not op_mini all'], + development: [ + 'last 1 chrome version', + 'last 1 firefox version', + 'last 1 safari version', + ], +}; function shouldSetBrowsers(isInteractive) { if (!isInteractive) { diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index a5aaccf0b3d..5a6bb215817 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -78,10 +78,16 @@ "optionalDependencies": { "fsevents": "1.2.7" }, - "browserslist": [ - ">0.2%", - "not dead", - "not ie <= 11", - "not op_mini all" - ] + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } }