@splunk/babel-preset

@splunk/babel-preset

A standardized preset for Babel to work with the latest and greatest TypeScript and JavaScript have to offer.

What This Preset Contains

📖 @babel/preset-typescript

This preset is used to strip type information from .ts(x) files. Doing so allows us to work on TypeScript files without the overhead of type checking.

For type checking, please use one of the available TypeScript loaders or tsc in your project.

Note: You may need to specify --extensions ".ts" if you're relying on @babel/cli & @babel/node CLIs to handle .ts files.

📖 @babel/preset-env

This is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s).

We provide this as-is with only the default options enabled.

📖 @babel/preset-react

This preset allows for the transpiling of JSX.

📖 @babel/plugin-proposal-class-properties

This plugin is remarkably useful with regards to TypeScript classes as it allows us to use class field declarations:

class Bork {
    //Property initializer syntax with type information
    sound: string = "bork";
    // Bound method
    public playSound = () => {
        return this.sound;
    }
}
const myBork = new Bork();
myBork.playSound // "bork"

📖 @babel/plugin-proposal-object-rest-spread

This is the second of two code transforms that we expose.

This allows developers to make use of rest operators inside objects:

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
//          ^-- { a: 3, b: 4 }

As well as spreads:

let n = { x, y, ...z }; // { x: 1, y: 2, a: 3, b: 4 }

Install

Step 1: Install the peer dependencies

$ npm install --save-dev @babel/core^7

Step 2: Install the package

$ npm install --save-dev @splunk/babel-preset

Usage

Add the preset to your babel configuration:

{
    "presets": ["@splunk/babel-preset"]
}

Options

Each of our presets can consume an options object as such:

{
    "presets": ["@splunk/babel-preset", {
        // These options are passed to @babel/preset-env
        "envPresetOptions": { ... },
        // These options are passed to @babel/preset-react
        "reactPresetOptions" : { ... },
        // These options are passed to @babel/preset-typescript
        "typescriptPresetOptions": { ... }
    }]
}

📖Please see the URLs at the top of this file for documentation surrounding available options for each of these loaders.

Each preset can be disabled:

{
    "presets": ["@splunk/babel-preset", {
        "envPresetEnabled": false,
        "reactPresetEnabled": false,
        "typescriptPresetEnabled": false
    }]
}