npm package: @splunk/babel-preset
Description: Standardized Splunk Babel preset
Author: Splunk Inc.
Latest version: 4.0.0

# @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](https://babeljs.io/docs/en/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](https://babeljs.io/docs/en/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](https://babeljs.io/docs/en/babel-preset-react)

This preset allows for the transpiling of JSX.

#### [📖 @babel/plugin-proposal-class-properties](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties)

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

```typescript
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](https://babeljs.io/docs/en/babel-plugin-proposal-object-rest-spreads)

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

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

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

As well as spreads:

```typescript
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:

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

## Options

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

```json
{
    "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:

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