Skip to content

Commit 8f1b69b

Browse files
committed
docs: more details for Babel preset and polyfill handling
1 parent 4e7d57f commit 8f1b69b

File tree

2 files changed

+32
-27
lines changed

2 files changed

+32
-27
lines changed

packages/@vue/babel-preset-app/README.md

Lines changed: 31 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,11 @@ This is the default Babel preset used in all Vue CLI projects.
77
- [babel-preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env)
88
- `modules: false`
99
- auto set to `'commonjs'` in Jest tests
10-
- [`useBuiltIns: 'usage'`](https://github.com/babel/babel/tree/master/packages/babel-preset-env#usebuiltins-usage)
11-
- ensures polyfills are imported on-demand
10+
- [`useBuiltIns: 'usage'`](#usebuiltins)
1211
- `targets` is determined:
1312
- using `browserslist` field in `package.json` when building for browsers
1413
- set to `{ node: 'current' }` when running unit tests in Node.js
15-
- Includes `Promise` and `Object.assign` polyfills by default so that they are usable even in non-transpiled dependencies (only for environments that need them)
14+
- Includes `Promise` polyfill by default so that they are usable even in non-transpiled dependencies (only for environments that need it)
1615
- [@babel/plugin-transform-runtime](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-runtime)
1716
- Only enabled for helpers since polyfills are handled by `babel-preset-env`
1817
- [dynamic import syntax](https://github.com/tc39/proposal-dynamic-import)
@@ -26,50 +25,57 @@ This is the default Babel preset used in all Vue CLI projects.
2625

2726
## Options
2827

29-
- **modules**
28+
### modules
3029

31-
Default:
30+
- Default:
3231
- `false` when building with webpack
3332
- `'commonjs'` when running tests in Jest.
3433

35-
Explicitly set `modules` option for `babel-preset-env`. See [babel-preset-env docs](https://github.com/babel/babel/tree/master/packages/babel-preset-env#modules) for more details.
34+
Explicitly set `modules` option for `babel-preset-env`. See [babel-preset-env docs](https://github.com/babel/babel/tree/master/packages/babel-preset-env#modules) for more details.
3635

37-
- **targets**
36+
### targets
3837

39-
Default:
38+
- Default:
4039
- determined from `browserslist` field in `package.json` when building for browsers
4140
- set to `{ node: 'current' }` when running unit tests in Node.js
4241

43-
Explicitly set `targets` option for `babel-preset-env`. See [babel-preset-env docs](https://github.com/babel/babel/tree/master/packages/babel-preset-env#targets) for more details.
42+
Explicitly set `targets` option for `babel-preset-env`. See [babel-preset-env docs](https://github.com/babel/babel/tree/master/packages/babel-preset-env#targets) for more details.
4443

45-
- **useBuiltIns**
44+
### useBuiltIns
4645

47-
Default: `'usage'`
46+
- Default: `'usage'`
47+
- Allowed values: `'usage' | 'entry' | false`
4848

49-
Explicitly set `useBuiltIns` option for `babel-preset-env`.
49+
Explicitly set `useBuiltIns` option for `babel-preset-env`.
5050

51-
The default value is `'usage'`, which adds imports to polyfills based on the usage in transpiled code. Note that the usage detection does not apply to your dependencies (which are excluded by `cli-plugin-babel` by default). If one of your dependencies need polyfills, you have three options:
51+
The default value is `'usage'`, which adds imports to polyfills based on the usage in transpiled code. For example, if you use `Object.assign` in your code, the corresponding polyfill will be auto-imported if your target environment does not supports it.
5252

53-
1. Add that dependency to the `transpileDependencies` option in `vue.config.js`. This would enable the same usage-based polyfill detection for that dependency as well;
53+
Note that the usage detection does not apply to your dependencies (which are excluded by `cli-plugin-babel` by default). If one of your dependencies need polyfills, you have a few options:
5454

55-
2. OR, you can explicitly include the needed polyfills using the [polyfills](#polyfills) option for this preset.
55+
1. **If the dependency is written in an ES version that your target environments do not support:** Add that dependency to the `transpileDependencies` option in `vue.config.js`. This would enable both syntax transforms and usage-based polyfill detection for that dependency.
5656

57-
3. Use `useBuiltIns: 'entry'` and then add `import '@babel/polyfill'` to your entry file. This will import **ALL** polyfills based on your `browserslist` targets so that you don't need to worry about dependency polyfills anymore, but will likely bloat your final bundle with some unused polyfills.
57+
2. **If the dependency ships ES5 code and explicitly lists the polyfills needed:** you can pre-include the needed polyfills using the [polyfills](#polyfills) option for this preset.
5858

59-
See [babel-preset-env docs](https://github.com/babel/babel/tree/master/packages/babel-preset-env#usebuiltins) for more details.
59+
3. **If the dependency ships ES5 code, but uses ES6+ features without explicitly listing polyfill requirements (e.g. Vuetify):** Use `useBuiltIns: 'entry'` and then add `import '@babel/polyfill'` to your entry file. This will import **ALL** polyfills based on your `browserslist` targets so that you don't need to worry about dependency polyfills anymore, but will likely increase your final bundle size with some unused polyfills.
6060

61-
- **polyfills**
61+
See [babel-preset-env docs](https://github.com/babel/babel/tree/master/packages/babel-preset-env#usebuiltins) for more details.
6262

63-
Default: `['es6.promise', 'es6.object.assign']`
63+
### polyfills
6464

65-
A list of [core-js](https://github.com/zloirock/core-js) polyfills to force-include when using `useBuiltIns: 'usage'`.
65+
- Default: `['es6.promise']`
6666

67-
Use this option when you have 3rd party dependencies that are not processed by Babel but have specific polyfill requirements. **These polyfills are automatically excluded if they are not needed for your target environments specified via `browserslist`**.
67+
A list of [core-js](https://github.com/zloirock/core-js) polyfills to pre-include when using `useBuiltIns: 'usage'`. **These polyfills are automatically excluded if they are not needed for your target environments**.
6868

69-
- **jsx**
69+
Use this option when you have 3rd party dependencies that are not processed by Babel but have specific polyfill requirements (e.g. Axios and Vuex require Promise support).
7070

71-
Default: `true`. Set to `false` to disable JSX support.
71+
### jsx
7272

73-
- **loose**
73+
- Default: `true`.
7474

75-
Default: `false`. Setting this to `true` will generate code that is more performant but less spec-compliant.
75+
Set to `false` to disable JSX support.
76+
77+
### loose
78+
79+
- Default: `false`.
80+
81+
Setting this to `true` will generate code that is more performant but less spec-compliant.

packages/@vue/babel-preset-app/index.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
const path = require('path')
22

33
const defaultPolyfills = [
4-
'es6.promise',
5-
'es6.object.assign'
4+
'es6.promise'
65
]
76

87
function getPolyfills (targets, includes, { ignoreBrowserslistConfig, configPath }) {

0 commit comments

Comments
 (0)