@vue/cli-plugin-babel

What is @vue/cli-plugin-babel?

@vue/cli-plugin-babel is a plugin for Vue CLI that enables Babel integration. Babel is a JavaScript compiler that allows you to use next-generation JavaScript, including ES6/ES7 features, by transforming it into a version of JavaScript that is compatible with current and older browsers. This plugin simplifies the process of setting up Babel in a Vue.js project.

What are @vue/cli-plugin-babel's main functionalities?

Transpile ES6/ES7 to ES5

This feature allows you to transpile modern JavaScript (ES6/ES7) to ES5, making your code compatible with older browsers. The preset configuration provided by @vue/cli-plugin-babel includes necessary plugins and settings to achieve this.

{"presets":["@vue/cli-plugin-babel/preset"]}

Custom Babel Configuration

You can customize the Babel configuration by adding your own presets and plugins. This example shows how to add the `@babel/plugin-proposal-class-properties` plugin to support class properties syntax.

{"presets":["@vue/cli-plugin-babel/preset"],"plugins":["@babel/plugin-proposal-class-properties"]}

Polyfills

This feature allows you to include polyfills for new JavaScript features that are not supported in older environments. By setting `useBuiltIns` to `entry` and specifying `corejs: 3`, you can ensure that necessary polyfills are included based on your usage.

{"presets":[["@vue/cli-plugin-babel/preset",{"useBuiltIns":"entry","corejs":3}]]}

Other packages similar to @vue/cli-plugin-babel

babel-loader

babel-loader is a webpack loader that allows you to transpile JavaScript files using Babel and webpack. It is more generic compared to @vue/cli-plugin-babel and can be used in any JavaScript project, not just Vue.js projects. It requires manual configuration of Babel presets and plugins.

rollup-plugin-babel

rollup-plugin-babel is a Rollup plugin that enables Babel integration with Rollup, a module bundler. Similar to babel-loader, it is not specific to Vue.js and can be used in any JavaScript project. It also requires manual configuration of Babel presets and plugins.

gulp-babel

gulp-babel is a Gulp plugin that allows you to use Babel to transpile JavaScript files in a Gulp build process. It is suitable for projects that use Gulp as their build system and, like the other alternatives, requires manual configuration of Babel presets and plugins.

README

@vue/cli-plugin-babel

babel plugin for vue-cli

Configuration

Uses Babel 7 + babel-loader + @vue/babel-preset-app by default, but can be configured via babel.config.js to use any other Babel presets or plugins.

By default, babel-loader excludes files inside node_modules dependencies. If you wish to explicitly transpile a dependency module, you will need to add it to the transpileDependencies option in vue.config.js:

module.exports = {
  transpileDependencies: [
    // can be string or regex
    'my-dep',
    /other-dep/
  ]
}

Caching

Cache options of babel-loader is enabled by default and cache is stored in <projectRoot>/node_modules/.cache/babel-loader.

Parallelization

thread-loader is enabled by default when the machine has more than 1 CPU cores. This can be turned off by setting parallel: false in vue.config.js.

parallel should be set to false when using Babel in combination with non-serializable loader options, such as regexes, dates and functions. These options would not be passed correctly to babel-loader which may lead to unexpected errors.

Installing in an Already Created Project

vue add babel

Injected webpack-chain Rules

• config.rule('js')
• config.rule('js').use('babel-loader')