10up babel preset

Babel preset for transforming JavaScript at 10up.

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?

Changelog

2.1.2

Patch Changes

• 04fa289: Fix wrong peer deps in some packages and make sure all packages supports v22

2.1.1

Patch Changes

• 91f266f: Fix HRM (again)

2.1.1-next.0

Patch Changes

• 91f266f: Fix HRM (again)

2.1.0

Minor Changes

• f3122e4: Updating several dependencies Better error messages when svg parsing fails

2.0.4

Patch Changes

• 010cea6: Updating package.json links to point to the new repository

2.0.3

All notable changes to this project will be documented in this file, per the Keep a Changelog standard.

[2.0.0]

• Removed: IE 11 support. [BREAKING CHANGE]
• Updated dependencies

[1.2.1]

• Updated deps

[1.2.0]

• Removed: @wordpress/babel-preset-default is not a dependency anymore, instead, we bring in the specific WordPress config needed. 82
• Updated deps 82

[1.1.2]

• TypeScript Support

[1.1.1]

• Adds usageBuiltIns option.

[1.1.0]

• Adds support to the new JSX transform. The new JSX transform is going to be used by default if available. If wordpress option is set to true, it won't be used.

[1.0.0] - Initial Release

Initial Release of 10up babel-preset.