Skip to content

Latest commit

 

History

History
85 lines (64 loc) · 2.78 KB

README.md

File metadata and controls

85 lines (64 loc) · 2.78 KB
Raw

10up babel preset

Babel preset for transforming JavaScript at 10up.

Support Level

Installation

npm install --save-dev @10up/babel-preset-default

Usage

Simply add @10up/babel-preset-default to your .babelrc file

// .babelrc
{
    "presets": [ "@10up/babel-preset-default"]
}

Options

This babel preset exposes a few options. The default options are listed below.

// .babelrc
{
    "presets": [
        ["@10up/babel-preset-default", {
            "modules": "auto",
            // defaults to true if modules is false and false otherwise.
            "runtimeESModules": false,
            "wordpress": false,
            "debug": false,
            "removePropTypes": {},
            "targets": [
                "> 1%",
                "ie >= 11",
                "last 2 versions",
                "Firefox ESR"
            ]
        }]
    ]
}

options.modules

It's the @babel/preset-env modules setting. Default's to auto which will detect whether the "caller" (e.g webpack) has ES6 modules support and if so, will disable module transpilation (this is the desired behavior for tree-shaking for example);

options.wordpress

When enabled will load @wordpress/babel-preset-default. Required when building WordPress Gutenberg blocks.

options.debug

Enables debug messages. Useful to review which presets and plugins babel is using.

options.removePropTypes

By default this babel preset will remove any prop-types declarations when building for production.

You rarely will need to change this setting, but in case you do, this option let's you specify any of the babel-plugin-transform-react-remove-prop-types options.

options.targets

Let's you specify which browser's are support. Set this option to {} if you want to leverage browserlist config sources (.browserslistrc). By default, the following browsers will be supported.

[
    "> 1%",
    "ie >= 11",
    "last 2 versions",
    "Firefox ESR"
]

The appropriate core-js polyfills will be added automatically for those browsers.

options.development

You can set this flag to enable or disable development mode, however, this preset will automatically detect that based on how it was loaded by the caller (e.g webpack).

Support Level

Active: 10up is actively working on this, and we expect to continue work for the foreseeable future. Bug reports, feature requests, questions, and pull requests are welcome.

Like what you see?