$ npm install @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.
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
'commonjs'
in Jest testsuseBuiltIns: 'usage'
targets
:
@babel/preset-env
will use browserslist config sources
(browserslist key in package.json file is recommend) unless either the targets
or ignoreBrowserslistConfig
options are set.{ node: 'current' }
when running unit tests in Node.jsPromise
polyfill by default so that they are usable even in non-transpiled dependencies (only for environments that need it)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.
transform-runtime
avoids inlining helpers in every file. This is enabled for helpers only, since polyfills are handled by babel-preset-env
.
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.
@vue/babel-preset-app
will use browserslist config sources
(browserslist key in package.json file is recommend) unless either the targets
or ignoreBrowserslistConfig
options are set.{ node: 'current' }
when running unit tests in Node.jsExplicitly set targets
option for babel-preset-env
. See babel-preset-env docs for more details.
'usage'
'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 in vue.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 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.
See @babel/preset-env docs for more details.
['es.array.iterator', 'es.promise', 'es.object.assign', 'es.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).
true
.Set to false
to disable JSX support. Or you can toggle @vue/babel-preset-jsx (or @vue/babel-plugin-jsx for Vue 3 projects) features here.
false
.Setting this to true
will generate code that is more performant but less spec-compliant.
[]
Multi page repo use entryFiles
to ensure inject polyfills to all entry file.
© 2010 - cnpmjs.org x YWFE | Home | YWFE