vite-plugin-babel

vite-plugin-babel is a plugin designed for the Vite build tool, enabling you to integrate the Babel transpiler into your Vite project. This empowers your project to harness advanced capabilities, such as those presented by the JavaScript Decorators proposal.

NOTE: While there already exists owlsdepartment's vite-plugin-babel, which promises to infuse Babel support into Vite, our experience revealed challenges when handling Vue Single File Components (SFCs). Upon a close inspection of its source code, it became apparent that for accurate transpilation, it was necessary to apply Babel after vite-plugin-vue had processed the source code. Interestingly, owlsdepartment's plugin calls the esbuildPluginBabel() during its config() stage, and the esbuildPluginBabel() attempts to transform the source code within its setup() function. This sequence led to the transpilation by Babel being applied before vite-plugin-vue had the opportunity to process it. Hence, we made the decision to develop a new plugin to correctly manage this process.

Installation

You can install this plugin using npm:

npm install --save-dev @haixing_hu/vite-plugin-babel

Or with yarn:

yarn add --dev @haixing_hu/vite-plugin-babel

Usage

To use this plugin, import and add it to your Vite configuration file vite.config.js:

import babelPlugin from '@haixing_hu/vite-plugin-babel';

export default {
  plugins: [
    // ...
    babelPlugin()
  ]
}

Note: It's recommended to place this plugin after other plugins in the list so that Babel transpiles source code after other plugins have processed it. For example, if your Vite project uses the vite-plugin-vue plugin, make sure to place this plugin after the vite-plugin-vue plugin so that Babel transpiles source code processed by the vite-plugin-vue plugin.

Configuration Options

This plugin supports several configuration options that you can pass when initializing it. Here are the available options and their default values:

Option	Type	Default	Description
config	object	{}	An object used to initialize the Babel transpiler, including Babel configuration options.
filter	RegExp	/\.(jsx? | vue)$/	A regular expression used to match source code files that should be transpiled.

Example

Let's say you've created a Vue project using create-vue, and you want to use the vue3-class-component package to write Vue components using JavaScript classes, taking advantage of the latest syntax features from the JavaScript Decorators proposal.

First, install Babel and related plugins:

yarn add @haixing_hu/vue3-class-component
yarn add --dev @babel/core @babel/runtime @babel/preset-env
yarn add --dev @babel/plugin-proposal-decorators @babel/plugin-transform-class-properties @babel/plugin-transform-runtime
yarn add --dev @haixing_hu/vite-plugin-babel

Next, configure your Vite project in the vite.config.js file as follows:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import babel from '@haixing_hu/vite-plugin-babel';

export default defineConfig({
  plugins: [
    vue({
      script: {
        babelParserPlugins: ['decorators'],   // enable decorators support
      },
    }),
    babel({
      config: {
        presets: [
          ["@babel/preset-env", { "modules": false }]
        ],
        plugins: [
          "@babel/plugin-transform-runtime",
          ["@babel/plugin-proposal-decorators", { "version": "2023-05" }],
          "@babel/plugin-transform-class-properties"
        ],
      },
      filter: /\.(jsx? \| vue)$/,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

In the configuration above, we specify Babel configuration directly in the config option of the vite-plugin-babel plugin. You can also place Babel configuration in the .babelrc, .babelrc.json, or babel.config.js configuration file and use the default configuration of the vite-plugin-babel plugin like this:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import babel from '@haixing_hu/vite-plugin-babel';

export default defineConfig({
  plugins: [
    vue({
      script: {
        babelParserPlugins: ['decorators'], // enable decorators support
      },
    }),
    babel(),        // Babel configuration is in .babelrc.json
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

For more information, you can check out the vue3-class-component-demo-vite project.

Contributing

If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request to the GitHub repository.

License

This plugin is distributed under the Apache 2.0 license. See the LICENSE file for more details.