@greenwood/plugin-babel

Overview

A Greenwood plugin for using Babel and applying it to your JavaScript. For more information and complete docs on Greenwood, please visit our website.

This package assumes you already have @greenwood/cli installed.

Installation

You can use your favorite JavaScript package manager to install this package.

# npm
$ npm i -D @greenwood/plugin-babel

# yarn
$ yarn add @greenwood/plugin-babel --dev

# pnpm
$ pnpm add -D @greenwood/plugin-babel

Usage

Add this plugin to your greenwood.config.js:

import { greenwoodPluginBabel } from '@greenwood/plugin-babel';

export default {
  // ...

  plugins: [
    greenwoodPluginBabel()
  ]
}

Create a babel.config.js (or .ts) in the root of your project with your own custom plugins / settings that you've installed and want to use:

export default {
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-private-methods'
  ]
};

This will then process your JavaScript with Babel using the configured plugins and settings you provide.

For now Babel configuration needs to be in CJS. Will we be adding ESM support soon!

Types

Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.

/** @type {import('@greenwood/plugin-babel').BabelPlugin} */

import type { BabelPlugin } from '@greenwood/plugin-babel';

Options

This plugin provides a default babel.config.js that includes support for @babel/preset-env using browserslist with reasonable default configs for each.

If you would like to use it, either standalone or with your own custom babel.config.js, you will need to take the following extra steps:

1. Install @babel/runtime and regenerator-runtime as dependencies to your project
2. When adding greenwoodPluginBabel to your greenwood.config.js, enable the extendConfig option

   import { greenwoodPluginBabel } from '@greenwood/plugin-babel';
   
   export default {
     // ...
   
     plugins: [
       greenwoodPluginBabel({
         extendConfig: true
       })
     ]
   };

If you have a custom babel.config.js, this option will merge its own presets and plugins in the array ahead of your own (if you have them).