1. @vue/cli-plugin-babel
babel plugin for vue-cli
@vue/cli-plugin-babel
Package: @vue/cli-plugin-babel
Created by: vuejs
Last modified: Thu, 07 Jul 2022 10:22:08 GMT
Version: 5.0.8
License: MIT
Downloads: 2,584,491
Repository: https://github.com/vuejs/vue-cli

Install

npm install @vue/cli-plugin-babel
yarn add @vue/cli-plugin-babel

@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')

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code