Support browserslist in @babel/preset-env (#6608)

* Add browserslist support to @babel/preset-env

* Support @babel/polyfill in entry point

Author: ianschmitz

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.

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

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) {

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"
+    ]
+  }
 }