Home Core Concepts Contributing Fluent API(FluentMap)(FluentSet)Babel ESLint Jest Mdx Prettier TSLint Webpack Presets Runners (core)Runners (other)Starter Kits

# Configuring Babel

> Use next generation JavaScript, today

The `@berun/fluent-babel` package provides a high level fluent interface for configuring and using `Babel`.

## Installation

`@berun/fluent-babel` is a utility interface that is automatically included by common BeRun presets such as `@berun/preset-react`. If you need to install it directly, follow these directions:

    $ npm install --save-dev @berun/fluent-babel

### 1. Embed within `berun.config.ts`

    // berun.config.ts

    export default {
      use: [
         // ...
        '@berun/fluent-babel',
        // ...
      ]
    }

### or 2. Use from within other BeRun middleware

    const babel = require('@berun/fluent-babel');

    function(berun) {
        berun.use(babel);
    }

## Babel shorthand methods

    berun.babel
      .root(root)
      .ast(ast)
      .auxiliaryCommentAfter(comment)
      .auxiliaryCommentBefore(comment)
      .babelrcRoots(roots)
      .code(code)
      .comments(comments)
      .compact(compact)
      .configFile(filename)
      .cwd(dirname)
      .envName(name)
      .extends(class)
      .filename(filename)
      .filenameRelative(file)
      .getModuleId(id)
      .highlightCode(highligjt)
      .inputSourceMap(map)
      .minified(minified)
      .moduleId(id)
      .moduleIds(ids)
      .moduleRoot(root)
      .only(only)
      .retainLines(retain)
      .shouldPrintComment(should)
      .sourceFileName(filename)
      .sourceMaps(maps)
      .sourceRoot(roots)
      .sourceType(type)
      .wrapPluginVisitorMethod(method)

Moving to deeper points in the API will change the context of what you are modifying. You can move back to the higher context by either referencing the top-level `berun.babel` again, or by calling `.end()` to move up one level. All API calls will return the API instance at the current context unless otherwise specified. This is so you may chain API calls continuously if desired ('fluent interface')

For details on the specific values that are valid for all shorthand and low-level methods, please refer to their corresponding name in the babel docs.

### Babel plugins

    // Backed at berun.babel.plugins
    berun.babel.plugin(name) : FluentMap

### Babel plugins: adding

NOTE: Do not use `new` to create the plugin, as this will be done for you.

    berun.babel
      .plugin(name)
      .options(args)

    // Examples

    berun.babel
      .plugin('@babel/plugin-transform-react-jsx')
      .options({ pragma: 'React.createElement' })

### Babel plugins: modify arguments

    berun.babel
      .plugin(name)
      .tap(args => newArgs)

    // Example
    berun.babel
      .plugin('@babel/plugin-transform-react-jsx')
      .tap(args => [...args, { pragma: 'Preact.createElement' }]);

### Babel plugins: removing

    berun.babel.plugins.delete(name)

### Babel plugins: ordering before

Specify that the current `plugin` context should operate before another named `plugin`. You cannot use both `.before()` and `.after()` on the same plugin.

    berun.babel
      .plugin(name)
        .before(otherName)

    // Example

    berun.babel
      .plugin('arrow-functions')
        .end()
      .plugin('literals')
        .before('arrow-functions');

### Babel plugins: ordering after

Specify that the current `plugin` context should operate after another named `plugin`. You cannot use both `.before()` and `.after()` on the same plugin.

    berun.babel
      .plugin(name)
        .after(otherName)

    // Example

    config
      .plugin('arrow-functions')
        .after('literals')
        .end()

### Babel presets

    // Backed at berun.babel.presets
    berun.babel.preset(name) : FluentMap

### Babel presets: adding

NOTE: Do not use `new` to create the plugin, as this will be done for you.

    berun.babel
      .preset(name)
      .options(args)

    // Examples

    berun.babel
      .preset('@berun/babel-preset-react-app')
      .end()

### Babel presets: removing

    berun.babel.plugins.delete(name)

### Babel presets: ordering before

Specify that the current `plugin` context should operate before another named `plugin`. You cannot use both `.before()` and `.after()` on the same plugin.

    berun.babel
      .preset(name)
        .before(otherName)

### Babel presets: ordering after

Specify that the current `preset` context should operate after another named `preset`. You cannot use both `.before()` and `.after()` on the same preset.

    berun.babel
      .preset(name)
        .after(otherName

### Babel environments

    // Backed at berun.babel.environments
    berun.babel.env(name) : FluentBabel

    // Example
      berun.babel
        .babelrc(false)
        .env('development')
        .plugin('literals')
        .end()
        .root('src')
        .end()
        .plugin('arrow-functions')
        .end()
        .plugin('literals')
        .end()
        .plugin('@babel/plugin-transform-react-jsx')
        .options({ pragma: 'React.createElement' })
        .end()

     expect(berun.babel.toConfig()).toEqual({
        babelrc: false,
        env: {
          development: {
            root: 'src',
            plugins: ['literals']
          }
        },
        plugins: [
          'arrow-functions',
          'literals',
          ['@babel/plugin-transform-react-jsx', { pragma: 'React.createElement' }]
        ]
      })

## Conditional configuration

When working with instances of `FluentMap` and `FluentSet`, you can perform conditional configuration using `when`. You must specify an expression to `when()` which will be evaluated for truthiness or falsiness. If the expression is truthy, the first function argument will be invoked with an instance of the current chained instance. You can optionally provide a second function to be invoked when the condition is falsy, which is also given the current chained instance.

    // Example: Only add literals plugin during production
    config
      .when(process.env.NODE_ENV === 'production', berun => {
        berun.babel
          .plugin('literals')
          .end()
      });

## Inspecting generated configuration

You can inspect the generated ESLint config using `berun.babel.toConfig()`.

    expect(berun.babel.toConfig()).toEqual({
        babelrc: false,
        presets: ['@berun/babel-preset-react-app'],
        highlightCode: true,
        compact: false
      })

‹ previous
next ›