@shopify/babel-preset
Shopify’s org-wide Babel transform.
Usage
Install this package, as well as the parts of Babel you wish to use:
With Yarn
yarn add --dev --exact babel-core @shopify/babel-preset
With npm
npm install babel-core @shopify/babel-preset --save-dev --save-exact
Then, in your Babel configuration (which should be under the babel
key of your package.json
), set this package as the babel preset you’d like to use:
{
"babel": {
"presets": ["@shopify/babel-preset"]
}
}
Preset
The @shopify/babel-preset
preset is designed to be a common import that can be used for the browser or the server.
Usage
{
"babel": {
"presets": [["@shopify/babel-preset", {"typescript": true}]]
}
}
Targets
This preset does not specify any targets to control what is transpiled. You should use Babel's top-level targets
option to specify build targets. For instance to target the current node version:
{
"targets": "current node",
"presets": ["@shopify/babel-preset"],
"plugins": ["polyfill-es-shims"]
}
See more details here.
Options
corejs
, debug
, modules
, useBuiltIns
These options come from the @babel/preset-env
preset and match the default values.
Read the options for more information on the possible values.
typescript
Enables @babel/preset-typescript
to transfrom TypeScript into Javascript.
typescriptOptions
See all available options.
transformRuntime
boolean
, defaults to false
This option when true
will enable the @babel/plugin-transform-runtime
plugin.
transformRuntimeOptions
This option configures the @babel/plugin-transform-runtime
plugin when the transformRuntime
option has been enabled.
See available options.
react
boolean
, defaults to false
.
This option when true
will enable the @babel/preset-react
preset.
reactOptions
The following options are different from the defaults. See all available options here.
reactOptions.useBuiltIns
boolean
, defaults to true
Will use the native built-in instead of trying to polyfill behavior for any plugins that require one.
reactOptions.useSpread
boolean
, defaults to true
When spreading props, use inline object with spread elements directly instead of Babel's extend helper or Object.assign.
transformReactConstantElements
boolean
, defaults to false
.
This option when true
will enable the @babel/plugin-transform-react-constant-elements
plugin in production mode.