Vite Plugin Babel

Run Babel during any Vite command, also during serve.

Motivations

Most Vite plugins runs Babel only during build, not serve, and only other possible way to do this is via @vitejs/plugin-react. ESBuild is awesome tool, but doesn't support some experimental features, like decorators (issue #2349) or class instance fields, out of box. You can use them in TypeScript, but not pure JS. This plugin was made to enable usage of such features and runs babel during optimizeDeps, dev and build stages, but it can be configured.

Installation

# yarn
yarn add -D vite-plugin-babel

# npm
npm install -D vite-plugin-babel

Usage

Add it to your Vite config

import { defineConfig } from 'vite';
import babel from 'vite-plugin-babel';

export default defineConfig({
    plugins: [
        // Babel will try to pick up Babel config files (.babelrc / .babelrc.* / babel.config.*)
        babel(),
        // ...
    ],

    // ...
})

Config

Babel config can be either passed to babelConfig field or via Babel config file. For all babel options see: Babel Options.

By default, babel is run for JS/JSX files (include defaults to /\.jsx?$/). To scope it to other files, set include / exclude and add the matching Babel presets/plugins to babelConfig yourself.

Migrating from 1.6.x: in 1.7.0 the default of include changed from undefined to /\.jsx?$/. If you previously relied on filter alone to scope files, set include explicitly to your desired scope — filter is now combined with include as an AND, so it can only narrow further, not expand. filter is deprecated; prefer include / exclude.

Name	Type	Default	Description
apply	'serve' | 'build' | (config: UserConfig, env: ConfigEnv) => boolean	undefined	Limits plugin usage to only build or only serve. If not specified, will be run during both cycles. Same as apply in Vite Plugins API
enforce	'pre' | 'post'	pre	Force plugin's order execution. More details: Vite Plugin Ordering
babelConfig	object	{}	Babel Transform Options
include	string | RegExp | Array<string|RegExp>	/\.jsx?$/	Which files to include. Defaults to .js / .jsx. Set explicitly to scope to other extensions — the matching Babel presets/plugins are your responsibility.
exclude	string | RegExp | Array<string|RegExp>	undefined	Which files to exclude. Takes priority over include.
filter	RegExp | (id: string) => boolean	undefined	Deprecated. Combined with include as an AND — can only narrow further, not expand. Prefer include / exclude.
loader	Loader or (path: string) => Loader	undefined	Vite 7 and lower This tells esbuild how to interpret the contents after babel's transformation. For example, the js loader interprets the contents as JavaScript and the css loader interprets the contents as CSS. The loader defaults to js if it's not specified. See the Content Types page for a complete list of all built-in loaders.
optimizeOnSSR	boolean	false	Run dependency optimization during SSR. Could be useful when running a project on a cloud workers, like @cloudflare/vite-plugin

Tips

Vite team didn't enable and include Babel by default, because they wanted to keep experience as fast as possible and esbuild can already do a lot of things, you would probably do with Babel. Because of that, we recommend to only include those Babel plugins you really need. You can use option babelConfig.configFile and omit Babel config file usage:

babel({
    babelConfig: {
        plugins: ['@babel/plugin-proposal-decorators']
    }
})

or just use Babel config file.

NOTE: Any babel plugins and presets need to be installed seperately and are not included with this package.

Troubleshooting

[ERROR] The JSX syntax extension is not currently enabled

This usually happens when you're using this plugin to only transform part of a .jsx file (such as decorators), and leaving the JSX syntax untouched. By default, esbuild interprets contents as .js, so you'll need to specify the loader esbuild should use.

Example:

import { extname } from 'path';
// ...
babel({
    babelConfig: {
        plugins: ['@babel/plugin-proposal-decorators'],

        // uses the jsx loader for .jsx files
        loader: path => {
          if (extname(path) === '.jsx') {
            return 'jsx';
          }
        },
    }
})

License

Library is under MIT License