From ec7834bac9143d7779030f240b3408120d28b86b Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Sat, 9 Mar 2019 13:13:46 -0800 Subject: [PATCH 1/7] Add browserslist support to @babel/preset-env --- packages/babel-preset-react-app/create.js | 8 -------- packages/react-dev-utils/browsersHelper.js | 14 ++++++++------ packages/react-scripts/package.json | 18 ++++++++++++------ 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index a0423f2551c..a7f138e2ae6 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -79,14 +79,6 @@ 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, 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 d33bd46a236..336108795ed 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -78,10 +78,16 @@ "optionalDependencies": { "fsevents": "1.2.4" }, - "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" + ] + } } From 307af34521243c0a895a84f9c99729c14dda6df5 Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Sat, 9 Mar 2019 14:09:49 -0800 Subject: [PATCH 2/7] Add documentation --- docusaurus/docs/supported-browsers-features.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docusaurus/docs/supported-browsers-features.md b/docusaurus/docs/supported-browsers-features.md index a8e0875c355..ec9924eb76c 100644 --- a/docusaurus/docs/supported-browsers-features.md +++ b/docusaurus/docs/supported-browsers-features.md @@ -26,3 +26,13 @@ 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. + +## Configuring supported browsers + +By default, the generated project includes a set of `browerslist` configuration in your `package.json` file to target a broad range of browsers based on global usage (`> 0.2%`) during production builds, and modern browers during development. This gives a good development experience, especially when using langauge features such as async/await, but still provides high compatibility with many browsers in production. + +The `browserslist` configuration controls the outputted javascript when running the `build` and `start` scripts 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 browers supported by your configured `browserslist`. + +> 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. \ No newline at end of file From 73798038326354c99bf196704c564c2255c8ba7d Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Sat, 9 Mar 2019 14:11:36 -0800 Subject: [PATCH 3/7] Add browserslist link --- docusaurus/docs/supported-browsers-features.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docusaurus/docs/supported-browsers-features.md b/docusaurus/docs/supported-browsers-features.md index ec9924eb76c..ef02a373521 100644 --- a/docusaurus/docs/supported-browsers-features.md +++ b/docusaurus/docs/supported-browsers-features.md @@ -29,10 +29,10 @@ If you use any other ES6+ features that need **runtime support** (such as `Array ## Configuring supported browsers -By default, the generated project includes a set of `browerslist` configuration in your `package.json` file to target a broad range of browsers based on global usage (`> 0.2%`) during production builds, and modern browers during development. This gives a good development experience, especially when using langauge features such as async/await, but still provides high compatibility with many browsers in production. +By default, the generated project includes a set of [`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%`) during production builds, and modern browers during development. This gives a good development experience, especially when using langauge features such as async/await, but still provides high compatibility with many browsers in production. The `browserslist` configuration controls the outputted javascript when running the `build` and `start` scripts 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 browers supported by your configured `browserslist`. > 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. \ No newline at end of file +> 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. From 38abdbc4ba427cf30f7133406086dc71b5a40d65 Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Sat, 9 Mar 2019 15:15:21 -0800 Subject: [PATCH 4/7] Support @babel/polyfill in entry point --- docusaurus/docs/supported-browsers-features.md | 8 ++++++-- packages/babel-preset-react-app/create.js | 5 ++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/docusaurus/docs/supported-browsers-features.md b/docusaurus/docs/supported-browsers-features.md index ef02a373521..d077a0c8aeb 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 @@ -27,7 +27,11 @@ Note that **this project includes no [polyfills](https://github.com/facebook/cre 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. -## Configuring supported browsers +## 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 set of [`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%`) during production builds, and modern browers during development. This gives a good development experience, especially when using langauge features such as async/await, but still provides high compatibility with many browsers in production. diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index a7f138e2ae6..9bc702d7eec 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -79,9 +79,8 @@ module.exports = function(api, opts, env) { // Latest stable ECMAScript features require('@babel/preset-env').default, { - // 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 From 0e20fb193b4e4d8acfc80d6bb278efc22fc708f7 Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Sun, 10 Mar 2019 12:48:37 -0700 Subject: [PATCH 5/7] Improve browserslist documentation --- .../docs/supported-browsers-features.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/docusaurus/docs/supported-browsers-features.md b/docusaurus/docs/supported-browsers-features.md index d077a0c8aeb..a1a521468b0 100644 --- a/docusaurus/docs/supported-browsers-features.md +++ b/docusaurus/docs/supported-browsers-features.md @@ -35,7 +35,24 @@ You can install [`@babel/polyfill`](https://babeljs.io/docs/en/babel-polyfill) a By default, the generated project includes a set of [`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%`) during production builds, and modern browers during development. This gives a good development experience, especially when using langauge features such as async/await, but still provides high compatibility with many browsers in production. -The `browserslist` configuration controls the outputted javascript when running the `build` and `start` scripts 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 browers supported by your configured `browserslist`. +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 browers 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. From 8044d1ddec1803ee287789151fbcffcbee412a2b Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Sun, 10 Mar 2019 13:46:25 -0700 Subject: [PATCH 6/7] Update docusaurus/docs/supported-browsers-features.md Co-Authored-By: ianschmitz --- docusaurus/docs/supported-browsers-features.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/docs/supported-browsers-features.md b/docusaurus/docs/supported-browsers-features.md index a1a521468b0..e4c2bc23bbf 100644 --- a/docusaurus/docs/supported-browsers-features.md +++ b/docusaurus/docs/supported-browsers-features.md @@ -33,7 +33,7 @@ You can install [`@babel/polyfill`](https://babeljs.io/docs/en/babel-polyfill) a ## Configuring Supported Browsers -By default, the generated project includes a set of [`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%`) during production builds, and modern browers during development. This gives a good development experience, especially when using langauge features such as async/await, but still provides high compatibility with many browsers in production. +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 browers supported by your configured `browserslist`. From 6b5efd3a36ed1f48ddb46682998719f2faac1c75 Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Sun, 10 Mar 2019 13:46:54 -0700 Subject: [PATCH 7/7] Update docusaurus/docs/supported-browsers-features.md Co-Authored-By: ianschmitz --- docusaurus/docs/supported-browsers-features.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/docs/supported-browsers-features.md b/docusaurus/docs/supported-browsers-features.md index e4c2bc23bbf..d2add48197a 100644 --- a/docusaurus/docs/supported-browsers-features.md +++ b/docusaurus/docs/supported-browsers-features.md @@ -35,7 +35,7 @@ You can install [`@babel/polyfill`](https://babeljs.io/docs/en/babel-polyfill) a 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 browers supported by your configured `browserslist`. +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`: