From 07ff8f30f58c35cc9023a8ee443a5fb81dbbdd70 Mon Sep 17 00:00:00 2001 From: Henry Zhu Date: Tue, 24 Apr 2018 10:33:52 -0400 Subject: [PATCH] preset-env update targets recommendation [skip ci] (#7790) --- packages/babel-preset-env/README.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/babel-preset-env/README.md b/packages/babel-preset-env/README.md index 8f81aa4871..a0f4906226 100644 --- a/packages/babel-preset-env/README.md +++ b/packages/babel-preset-env/README.md @@ -8,6 +8,8 @@ npm install @babel/preset-env --save-dev Without any configuration options, @babel/preset-env behaves exactly the same as @babel/preset-latest (or @babel/preset-es2015, @babel/preset-es2016, and @babel/preset-es2017 together). +> We don't recommend using `preset-env` this way because it doesn't take advantage of it's greater capabilities of targeting specific browsers. + ```json { "presets": ["@babel/preset-env"] @@ -16,20 +18,23 @@ Without any configuration options, @babel/preset-env behaves exactly the same as You can also configure it to only include the polyfills and transforms needed for the browsers you support. Compiling only what's needed can make your bundles smaller and your life easier. -This example only includes the polyfills and code transforms needed for the last two versions of each browser, and versions of Safari greater than or equal to 7. We use [browserslist](https://github.com/ai/browserslist) to parse this information, so you can use [any valid query format supported by browserslist](https://github.com/ai/browserslist#queries). +This example only includes the polyfills and code transforms needed for coverage of users > 0.25%, ignoring Internet Explorer 11 and Opera Mini. We use [browserslist](https://github.com/ai/browserslist) to parse this information, so you can use [any valid query format supported by browserslist](https://github.com/ai/browserslist#queries). -```json +```js { "presets": [ ["@babel/preset-env", { "targets": { - "browsers": ["last 2 versions", "safari >= 7"] + // The % refers to the global coverage of users from browserslist + "browsers": [ ">0.25%", "not ie 11", "not op_mini all"] } }] ] } ``` +> You can also target individual versions of browsers instead of using a query with `"targets": { "chrome": "66" }`. + You may also target browsers supporting ES Modules (https://www.ecma-international.org/ecma-262/6.0/#sec-modules). When specifying this option, the browsers field will be ignored. You can use this approach in combination with `` to conditionally serve smaller scripts to users (https://jakearchibald.com/2017/es-modules-in-browsers/#nomodule-for-backwards-compatibility). *Please note*: when specifying the esmodules target, browsers targets will be ignored.