npm package: @lite-v3/babel-preset
Description: Babel preset for tokopedia web services
Latest version: 1.4.0

# @lite-v3/babel-preset

> A babel preset for tokopedia web services and packages

The standard preset for web services and packages in tokopedia environment.

## Install

```sh
$ npm install --save-dev @lite-v3/babel-preset
```

Or using Yarn

```sh
$ yarn add --dev @lite-v3/babel-preset
```

## Usage

### Via `.babelrc` (Recommended)

**.babelrc**

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

### Via CLI

```sh
$ babel script.js --presets @lite-v3/babel-preset
```

### Via Node API

```javascript
require('@babel/core').transform('code', {
  presets: ['@lite-v3/babel-preset'],
});
```

### Options

#### modules

Enable transformation of ES module syntax to another module type. Setting this to false will preserve ES modules. Use this only if you intend to ship native ES Modules to browsers. If you are using a bundler with Babel, the default modules: "auto" is always preferred.

#### useBuiltIns and corejs

This option only has an effect when used alongside `useBuiltIns: usage` or `useBuiltIns: entry`, and ensures @babel/preset-env injects the polyfills supported by your core-js version. It is recommended to specify the minor version otherwise "3" will be interpreted as "3.0" which may not include polyfills for the latest features.

```json
{
  "presets": [
    [
      "@lite-v3/babel-preset",
      {
        "corejs": 3,
        "useBuiltIns: "entry"
      }
    ]
  ]
}
```

#### targets

This module uses @babel/preset-env to target specific environments.

Please refer to [@babel/preset-env#targets](https://babeljs.io/docs/en/babel-preset-env#targets) for a list of available options.

For a list of browsers please see [browserlist](https://github.com/ai/browserslist).

You may override our default list of targets by providing your own `targets` key.

```json
{
  "presets": [
    [
      "@lite-v3/babel-preset",
      {
        "targets": {
          "chrome": 50,
          "ie": 11,
          "firefox": 45
        }
      }
    ]
  ]
}
```

The following transpiles only for Node v6.

```json
{
  "presets": [
    [
      "@lite-v3/babel-preset",
      {
        "targets": {
          "node": 6
        }
      }
    ]
  ]
}
```

#### exclude

This option is useful for "blacklisting" a transform like `@babel/plugin-transform-regenerator` if you don't use generators and don't want to include regeneratorRuntime (when using useBuiltIns) or for using another plugin like fast-async instead of Babel's async-to-gen.

```json
{
  "presets": [
    [
      "@lite-v3/babel-preset",
      {
        "exclude": ["es.promise", "es.promise.finally", "transform-typeof-symbol"]
      }
    ]
  ]
}
```

#### service
This option will enable default babel plugins that will be compatible for web services. Set to `true` if you are service author, otherwise the plugins are only intended for packages/pluggbales.

```json
{
  "presets": [
    [
      "@lite-v3/babel-preset",
      {
        "service": true
      }
    ]
  ]
}
```

#### modern
`modern` option will allow you to build with presets that is intended only for modern browsers. This option requires `service` to be `true`. This is useful for differential serving. 

#### style
`style` option is only for `babel-plugin-imports` especially for packages or services that using [antd](https://ant.design/) for its design system. Please refer to this [link](https://www.npmjs.com/package/babel-plugin-import#style) for more details about the option.

#### useAntd
Provide presets and its corresponding plugins to support [antd](https://ant.design/) design system. Please refer to [Receipts](https://www.npmjs.com/package/@lite-v3/babel-preset#receipts) to how to use it, and [presets](https://www.npmjs.com/package/@lite-v3/babel-preset#presets) and [plugins](https://www.npmjs.com/package/@lite-v3/babel-preset#plugins) to know more about which plugins/preset that be provided.

#### useTypeScript
Provide presets and its corresponding plugins to support [TypeScript](https://www.typescriptlang.org/). Please refer to [Receipts](https://www.npmjs.com/package/@lite-v3/babel-preset#receipts) to how to use it, and [presets](https://www.npmjs.com/package/@lite-v3/babel-preset#presets) and [plugins](https://www.npmjs.com/package/@lite-v3/babel-preset#plugins) to know more about which plugins/preset that be provided.

#### useReact
Provide presets and its corresponding plugins to support [React](https://reactjs.org/). Please refer to [Receipts](https://www.npmjs.com/package/@lite-v3/babel-preset#receipts) to how to use it, and [presets](https://www.npmjs.com/package/@lite-v3/babel-preset#presets) and [plugins](https://www.npmjs.com/package/@lite-v3/babel-preset#plugins) to know more about which plugins/preset that be provided.

#### useGraphQL
Provide presets and its corresponding plugins to support [GraphQL](https://graphql.org/). Please refer to [Receipts](https://www.npmjs.com/package/@lite-v3/babel-preset#receipts) to how to use it, and [presets](https://www.npmjs.com/package/@lite-v3/babel-preset#presets) and [plugins](https://www.npmjs.com/package/@lite-v3/babel-preset#plugins) to know more about which plugins/preset that be provided.

#### debug

You may be interested to log non-throwing-errors or warnings by setting `debug` to `true`.

```json
{
  "presets": [
    [
      "@lite-v3/babel-preset",
      {
        "debug": true
      }
    ]
  ]
}
```

#### runtimeHelpers

Toggles whether or not inlined Babel helpers (classCallCheck, extends, etc.) are replaced with calls to moduleName. The default is `true`.

```json
{
  "presets": [
    [
      "@lite-v3/babel-preset",
      {
        "runtimeHelpers": false
      }
    ]
  ]
}
```

#### runtimeRegenerator

Toggles whether or not generator functions are transformed to use a regenerator runtime that does not pollute the global scope. The default is `true`.

```json
{
  "presets": [
    [
      "@lite-v3/babel-preset",
      {
        "runtimeRegenerator": false
      }
    ]
  ]
}
```

## Presets
|  Types |   Presets|
|:---: |:---:|
|  default | `@babel/preset-env`|
|  React | `@babel/preset-react`|
|  TyepScript | `@babel/preset-typescript`|

## Plugins
### Client (Service)
#### Legacy
- `babel-plugin-macros`
- `babel-plugin-lodash`
- `babel-plugin-console`
- `@babel/plugin-proposal-decorators`
- `@babel/plugin-proposal-class-properties`
- `@babel/plugin-proposal-private-methods`
- `@babel/plugin-proposal-export-default-from`
- `@babel/plugin-proposal-export-namespace-from`
- `@babel/plugin-proposal-object-rest-spread`
- `@babel/plugin-proposal-nullish-coalescing-operator`
- `@babel/plugin-transform-runtime`
- `@babel/plugin-transform-destructuring`
- `@babel/plugin-syntax-dynamic-import`
- `@babel/plugin-syntax-async-generators`

#### Modern
- `babel-plugin-macros`
- `babel-plugin-lodash`
- `babel-plugin-console`
- `@babel/plugin-proposal-numeric-separator`
- `@babel/plugin-proposal-nullish-coalescing-operator`
- `@babel/plugin-proposal-export-default-from`
- `@babel/plugin-syntax-dynamic-import`
- `@babel/plugin-transform-runtime`

#### React
- `@loadable/babel-plugin`
- `babel-plugin-emotion`
- `react-hot-loader/babel`
- `babel-plugin-transform-react-remove-prop-types`

### Client (Package or Pluggables)
- `@babel/plugin-proposal-decorators`
- `@babel/plugin-proposal-private-methods`
- `@babel/plugin-proposal-class-properties`
- `@babel/plugin-proposal-export-default-from`
- `@babel/plugin-proposal-export-namespace-from`
- `@babel/plugin-proposal-object-rest-spread`
- `@babel/plugin-proposal-optional-chaining`
- `@babel/plugin-proposal-nullish-coalescing-operator`
- `@babel/plugin-syntax-async-generators`
- `@babel/plugin-syntax-dynamic-import`
- `@babel/plugin-transform-destructuring`
- `@babel/plugin-transform-runtime`
- `babel-plugin-lodash`

### Server (Service)
#### Base
- `babel-plugin-macros`
- `babel-plugin-lodash`
- `babel-plugin-console`
- `@babel/plugin-proposal-decorators`
- `@babel/plugin-proposal-class-properties`
- `@babel/plugin-proposal-private-methods`
- `@babel/plugin-proposal-export-default-from`
- `@babel/plugin-proposal-export-namespace-from`
- `@babel/plugin-proposal-object-rest-spread`
- `@babel/plugin-proposal-nullish-coalescing-operator`
- `@babel/plugin-proposal-optional-chaining`
- `@babel/plugin-transform-runtime`
- `@babel/plugin-transform-destructuring`
- `@babel/plugin-syntax-dynamic-import`
- `@babel/plugin-syntax-async-generators`

#### React
- `babel-plugin-emotion`
- `@babel/plugin-transform-react-constant-elements`
- `@babel/plugin-transform-react-inline-elements`
- `babel-plugin-transform-react-remove-prop-types`
- `@loadable/babel-plugin`

### Server (Packages or Pluggables)
- `@babel/plugin-proposal-decorators`
- `@babel/plugin-proposal-private-methods`
- `@babel/plugin-proposal-class-properties`
- `@babel/plugin-proposal-export-default-from`
- `@babel/plugin-proposal-export-namespace-from`
- `@babel/plugin-proposal-object-rest-spread`
- `@babel/plugin-proposal-optional-chaining`
- `@babel/plugin-proposal-nullish-coalescing-operator`
- `@babel/plugin-syntax-async-generators`
- `@babel/plugin-syntax-dynamic-import`
- `@babel/plugin-transform-destructuring`
- `@babel/plugin-transform-runtime`
- `babel-plugin-lodash`
## Receipts
### Using TypeScript and React for your service

**.babelrc**

```json
{
  "presets": [
    [
      "@lite-v3/babel-preset",
      {
        "service": true,
        "useReact": true,
        "useTypeScript": true,
      }
    ]
  ]
}
```

### Using antd for service

**.babelrc**

```json
{
  "presets": [
    [
      "@lite-v3/babel-preset",
      {
        "service": true,
        "useReact": true,
        "useAntd": true,
      }
    ]
  ]
}
```

### Package for Node environment

**.babelrc**

```json
{
  "presets": [
    [
      "@lite-v3/babel-preset",
      {
        "modules": "commonjs",
      }
    ]
  ]
}