Skip to content

Commit 73289b7

Browse files
More docs about useBuiltIns.
1 parent 4cba1e6 commit 73289b7

File tree

1 file changed

+74
-55
lines changed

1 file changed

+74
-55
lines changed

docs/preset-env.md

Lines changed: 74 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -264,18 +264,85 @@ This option is useful for "blacklisting" a transform like `@babel/plugin-transfo
264264

265265
`"usage"` | `"entry"` | `false`, defaults to `false`.
266266

267-
This option configures how `@babel/preset-env` handles polyfills.
267+
This option configures how `@babel/preset-env` handles polyfills and whether optimizations are applied to only include polyfills that are needed.
268268

269-
When either the `usage` or `entry` options are used, `@babel/preset-env` will add direct references to `core-js` modules as bare imports (or requires). This means `core-js` will be resolved relative to the file itself and needs to be accessible.
270-
271-
Since `@babel/polyfill` was deprecated in 7.4.0, we recommend directly adding `core-js` and setting the version via the [`corejs`](#corejs) option.
269+
When specifying polyfilling behavior, you will want to include `core-js` and probably `regenerator-runtime` dependencies:
272270

273271
```sh
274-
npm install core-js@3 --save
272+
npm install --save core-js regenerator-runtime
273+
```
274+
275+
You'll also need to set the core-js version via the [`corejs`](#corejs) option:
276+
277+
```json
278+
{
279+
"presets": [
280+
[
281+
"@babel/preset-env",
282+
{
283+
"corejs": 3
284+
}
285+
]
286+
]
287+
}
288+
```
275289

276-
# or
290+
Generally, `"usage"` meets the needs of most users by only including the polyfills that are needed.
277291

278-
npm install core-js@2 --save
292+
#### `useBuiltIns: 'usage'`
293+
294+
Adds specific imports for polyfills when they are used in each file. We take advantage of the fact that a bundler will load the same polyfill only once.
295+
296+
You do not need to provide "entry level" import statements, as with the `"entry"` option.
297+
298+
```js
299+
// nope
300+
import 'core-js';
301+
import 'regenerator-runtime/runtime';
302+
```
303+
304+
**In**
305+
306+
a.js
307+
308+
```js
309+
var a = new Promise();
310+
```
311+
312+
b.js
313+
314+
```js
315+
var b = new Map();
316+
```
317+
318+
**Out (if environment doesn't support it)**
319+
320+
a.js
321+
322+
```js
323+
import "core-js/modules/es.promise";
324+
var a = new Promise();
325+
```
326+
327+
b.js
328+
329+
```js
330+
import "core-js/modules/es.map";
331+
var b = new Map();
332+
```
333+
334+
**Out (if environment supports it)**
335+
336+
a.js
337+
338+
```js
339+
var a = new Promise();
340+
```
341+
342+
b.js
343+
344+
```js
345+
var b = new Map();
279346
```
280347

281348
#### `useBuiltIns: 'entry'`
@@ -336,54 +403,6 @@ You can read [core-js](https://github.com/zloirock/core-js)'s documentation for
336403
> NOTE: When using `core-js@2` (either explicitly using the [`corejs: 2`](#corejs) option or implicitly), `@babel/preset-env` will also transform imports and requires of `@babel/polyfill`.
337404
> This behavior is deprecated because it isn't possible to use `@babel/polyfill` with different `core-js` versions.
338405
339-
#### `useBuiltIns: 'usage'`
340-
341-
Adds specific imports for polyfills when they are used in each file. We take advantage of the fact that a bundler will load the same polyfill only once.
342-
343-
**In**
344-
345-
a.js
346-
347-
```js
348-
var a = new Promise();
349-
```
350-
351-
b.js
352-
353-
```js
354-
var b = new Map();
355-
```
356-
357-
**Out (if environment doesn't support it)**
358-
359-
a.js
360-
361-
```js
362-
import "core-js/modules/es.promise";
363-
var a = new Promise();
364-
```
365-
366-
b.js
367-
368-
```js
369-
import "core-js/modules/es.map";
370-
var b = new Map();
371-
```
372-
373-
**Out (if environment supports it)**
374-
375-
a.js
376-
377-
```js
378-
var a = new Promise();
379-
```
380-
381-
b.js
382-
383-
```js
384-
var b = new Map();
385-
```
386-
387406
#### `useBuiltIns: false`
388407

389408
Don't add polyfills automatically per file, and don't transform `import "core-js"` or `import "@babel/polyfill"` to individual polyfills.

0 commit comments

Comments
 (0)