Modern.js Module
Guide
API
Plugins
Guide
API
Plugins

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

npm
yarn
pnpm
bun
npm add @modern-js/plugin-module-babel -D

Register

You can install the plugin with the following command:

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:

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.

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

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']],
    }),
  ],
});