# vite-plugin-babel-dev

> Runs babel during dev serve in Vite

Latest version **1.0.2** (published 2022-01-13) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install vite-plugin-babel-dev
pnpm add vite-plugin-babel-dev
yarn add vite-plugin-babel-dev
bun add vite-plugin-babel-dev
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-01-13 |
| First published | 2022-01-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 68 |
| Author | Miłosz Mandowski |
| Maintainers | f0rsaken |
| Keywords | vite-plugin, vite, babel |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-babel-dev
- Repository: https://github.com/owlsdepartment/vite-plugin-babel-dev
- Homepage: https://github.com/owlsdepartment/vite-plugin-babel-dev#readme
- Issues: https://github.com/owlsdepartment/vite-plugin-babel-dev/issues
- npm.io page: https://npm.io/package/vite-plugin-babel-dev

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2022-01-13
- 1.0.1 — 2022-01-12
- 1.0.0 — 2022-01-12

## README

# Vite Plugin Babel Dev

Run babel during dev server in Vite.

## Motivations

Vite comes with Babel out of box, but runs it only during `build` and only other possible why to do this is via [@vitejs/plugin-react](https://www.npmjs.com/package/@vitejs/plugin-react). ESBuild is awesome tool, but doesn't support some experimental features, like decorators ([issue #2349](https://github.com/vitejs/vite/issues/2349)) or class instance fields, out of box. You can use them only in TypeScript, but not pure JS. This plugin was made to enable usage of such features and runs babel during `optimizeDeps` and `dev` stages.

## Instalation

```bash
# yarn
yarn add -D vite-plugin-babel-dev

# npm
npm install -D vite-plugin-babel-dev
```

## Usage

Add it to your Vite config

```js
import { defineConfig } from 'vite';
import babelDev from 'vite-plugin-babel-dev';

export default defineConfig({
    plugins: [
        babelDev({
            babelConfig: {
                plugin: ['@babel/plugin-proposal-decorators']
            }
        }),
        // ...
    ],

    // ...
})
```

## Config

Babel config can be either passed to `babelConfig` field or via `.babelrc` type of file. For all babel options see: [Babel Options](https://babeljs.io/docs/en/options).

By default, babel is run only for JS/JSX files. You can change that vie `filter` option.

| Name | Type | Default | Description |
| -- | -- | -- | -- |
| `babelConfig` | `object` | `{}` | [Babel Options](https://babeljs.io/docs/en/options) |
| `filter` | `RegExp` | `/\.jsx?$/` | wich files is babel applied to. By default it's js/jsx files |

## Tips

Vite team didn't enabled it by default, because they wanted to keep dev environment as fast as possible. Because of that, we recommend to only include those Babel plugins you really need. You can use option `babelConfig.plugin` and disable usage of babel config file, ex.:

```js
babelDev({
    babelConfig: {
        babelrc: false,
        configFile: false,
        plugin: ['@babel/plugin-proposal-decorators']
    }
})
```

or just use `.babelrc.json` that will be also used during build process.

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

## License

Library is under [MIT License](LICENSE)

---
_Source: https://npm.io/package/vite-plugin-babel-dev · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._