.. | ||
index.js | ||
LICENSE | ||
package.json | ||
polyfillsPlugin.js | ||
README.md |
@vue/babel-preset-app
This is the default Babel preset used in all Vue CLI projects. Note: this preset is meant to be used exclusively in projects created via Vue CLI and does not consider external use cases.
Included Features
@babel/preset-env
preset-env
automatically determines the transforms and polyfills to apply based on your browser target. See Browser Compatibility section in docs for more details.
modules: false
- auto set to
'commonjs'
in Jest tests
- auto set to
useBuiltIns: 'usage'
targets
is determined:- using
browserslist
field inpackage.json
when building for browsers - set to
{ node: 'current' }
when running unit tests in Node.js
- using
- Includes
Promise
polyfill by default so that they are usable even in non-transpiled dependencies (only for environments that need it)
Stage 3 or Below
Only the following stage 3 or below features are supported (object rest spread is supported as part of preset-env
):
If you need additional stage 3 or below features, you need to install and configure it yourself.
Vue JSX support
@babel/plugin-transform-runtime
transform-runtime
avoids inlining helpers in every file. This is enabled for helpers only, since polyfills are handled by babel-preset-env
.
Options
- All options from @babel/preset-env are supported, with some of them having smarter defaults.
modules
- Default:
false
when building with webpack'commonjs'
when running tests in Jest.
Explicitly set modules
option for babel-preset-env
. See babel-preset-env docs for more details.
targets
- Default:
- determined from
browserslist
field inpackage.json
when building for browsers - set to
{ node: 'current' }
when running unit tests in Node.js
- determined from
Explicitly set targets
option for babel-preset-env
. See babel-preset-env docs for more details.
useBuiltIns
- Default:
'usage'
- Allowed values:
'usage' | 'entry' | false
Explicitly set useBuiltIns
option for babel-preset-env
.
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.
If you are building a library or web component instead of an app, you probably want to set this to false
and let the consuming app be responsible for the polyfills.
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:
-
If the dependency is written in an ES version that your target environments do not support: Add that dependency to the
transpileDependencies
option invue.config.js
. This would enable both syntax transforms and usage-based polyfill detection for that dependency. -
If the dependency ships ES5 code and explicitly lists the polyfills needed: you can pre-include the needed polyfills using the polyfills option for this preset.
-
If the dependency ships ES5 code, but uses ES6+ features without explicitly listing polyfill requirements (e.g. Vuetify): Use
useBuiltIns: 'entry'
and then addimport '@babel/polyfill'
to your entry file. This will import ALL polyfills based on yourbrowserslist
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.
See @babel/preset-env docs for more details.
polyfills
- Default:
['es6.array.iterator', 'es6.promise', 'es6.object.assign', 'es7.promise.finally']
A list of core-js polyfills to pre-include when using useBuiltIns: 'usage'
. These polyfills are automatically excluded if they are not needed for your target environments.
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).
jsx
- Default:
true
.
Set to false
to disable JSX support. Or you can toggle @vue/babel-preset-jsx features here.
loose
- Default:
false
.
Setting this to true
will generate code that is more performant but less spec-compliant.
entryFiles
- Default:
[]
Multi page repo use entryFiles
to ensure inject polyfills to all entry file.