Socket
Socket
Sign inDemoInstall

@lite-v3/babel-preset

Package Overview
Dependencies
235
Maintainers
4
Versions
22
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @lite-v3/babel-preset

Babel preset for tokopedia web services


Version published
Weekly downloads
1.8K
increased by22.19%
Maintainers
4
Install size
18.8 MB
Created
Weekly downloads
 

Readme

Source

@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

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

Or using Yarn

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

Usage

.babelrc

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

Via CLI

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

Via Node API

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.

{
  "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 for a list of available options.

For a list of browsers please see browserlist.

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

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

The following transpiles only for Node v6.

{
  "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.

{
  "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.

{
  "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 for its design system. Please refer to this link for more details about the option.

useAntd

Provide presets and its corresponding plugins to support antd design system. Please refer to Receipts to how to use it, and presets and plugins to know more about which plugins/preset that be provided.

useTypeScript

Provide presets and its corresponding plugins to support TypeScript. Please refer to Receipts to how to use it, and presets and plugins to know more about which plugins/preset that be provided.

useReact

Provide presets and its corresponding plugins to support React. Please refer to Receipts to how to use it, and presets and plugins to know more about which plugins/preset that be provided.

useGraphQL

Provide presets and its corresponding plugins to support GraphQL. Please refer to Receipts to how to use it, and presets and 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.

{
  "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.

{
  "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.

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

Presets

TypesPresets
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

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

Using antd for service

.babelrc

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

Package for Node environment

.babelrc

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

FAQs

Last updated on 09 Nov 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc