# Babel Plugin

:::tip
Normally, we don't need to use Babel to transform our code, this plugin is only used as a downgrade.
:::

## Quick start

### Install

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @modern-js/plugin-module-babel -D" />

### Register

You can install the plugin with the following command:

```ts
import { moduleTools, defineConfig } from '@modern-js/module-tools';
import { modulePluginBabel } from '@modern-js/plugin-module-babel';

export default defineConfig({
  plugins: [moduleTools(), modulePluginBabel()],
});
```

You can also configure the registration via hooks, for example,
if you need to bundle two files A and B at the same time and only need to use babel when bundle A:

```ts
import { moduleTools, defineConfig } from '@modern-js/module-tools';
import { getBabelHook } from '@modern-js/plugin-module-babel';

const babelHook = getBabelHook({
  // babel options
});

export default defineConfig({
  plugins: [moduleTools()],
  buildConfig: [
    {
      hooks: [babelHook],
      input: ['src/a.ts'],
    },
    {
      input: ['src/b.ts'],
    },
  ],
});
```

## Config

See [babel options](https://babeljs.io/docs/options).

Here is an example with `@babel/preset-env` configured

```ts
import { moduleTools, defineConfig } from '@modern-js/module-tools';
import { modulePluginBabel } from '@modern-js/plugin-module-babel';

export default defineConfig({
  plugins: [
    moduleTools(),
    modulePluginBabel({
      presets: [['@babel/preset-env']],
    }),
  ],
});
```