@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
Via .babelrc
(Recommended)
.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
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
{
"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",
}
]
]
}