@anolilab/babel-preset

Babel preset

A babel preset for transforming your JavaScript for Anolilab.

---

^{Daniel Bannert's open source work is supported by the community on GitHub Sponsors}

---

It contains transforms for all stage 4 (ES2018) and stage 3 syntax.

Additionally, stage 4 syntax that is excluded is as follows:

• Generators: regenerator-runtime is too heavyweight for our use.
• Lifted template literal restrictions: we do not use tagged template literals, nor implement custom DSLs, otherwise we would enable this.

fast-async is used to compile async function without generators.

Install

$ npm install --save-dev @babel/core @babel/runtime @anolilab/babel-preset

Usage

Via .babelrc (Recommended)

.babelrc

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

Via CLI

$ babel script.js --presets @anolilab/babel-preset

Via Node API

require("@babel/core").transform("code", {
    presets: ["@anolilab/babel-preset"],
});

Targeting Environments

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.

List of our supported browsers

The following transpiles only for Node v6.

{
    "presets": [
        [
            "@anolilab/babel-preset",
            {
                "targets": {
                    "node": 6
                }
            }
        ]
    ]
}

If you wish, you can also inherit our default list of browsers and extend them.

const browserlist = require("browserslist-config-anolilab");

module.exports = {
    presets: [
        [
            "@anolilab/babel-preset",
            {
                targets: browserlist['production'],
            },
        ],
    ],
};

You may override our default debug option by providing your own debug key.

{
    "presets": [
        [
            "@anolilab/babel-preset",
            {
                "debug": true
            }
        ]
    ]
}

Typescript Mode

To use this preset please install

$ npm install --save-dev @babel/preset-typescript @babel/plugin-syntax-jsx

This preset can be configured to support typescript, using "typescript": true in our preset.

{
    "presets": [
        [
            "@anolilab/babel-preset",
            {
                "typescript": true
            }
        ]
    ]
}

React Mode

To use this preset please install

$ npm install --save-dev @babel/preset-react

This preset can be configured to support react, using "react": true or "react": {...} in our preset.

{
    "presets": [
        [
            "@anolilab/babel-preset",
            {
                "react": true
            }
        ]
    ]
}

Or

{
    "presets": [
        [
            "@anolilab/babel-preset",
            {
                "react": {
                    "pragma": "dom", // default pragma is React.createElement (only in classic runtime)
                    "pragmaFrag": "DomFrag", // default is React.Fragment (only in classic runtime)
                    "throwIfNamespace": false, // defaults to true
                    "runtime": "classic" // defaults to classic
                    // "importSource": "custom-jsx-library" // defaults to react (only in automatic runtime)
                }
            }
        ]
    ]
}

React Development Mode

When process.env.NODE_ENV is 'development', the development mode will be set for @babel/preset-react.

You may override our default development option by providing your own boolean development key.

{
    "presets": [
        [
            "@anolilab/babel-preset",
            {
                "react": true,
                "development": false
            }
        ]
    ]
}

React PropTypes removal

This preset can be configured to remove propTypes using babel-plugin-transform-react-remove-prop-types with the following default options:

To enable this transformation with the default options, set the removePropTypes option to true:

{
    "presets": [
        [
            "@anolilab/babel-preset",
            {
                "react": true,
                "removePropTypes": true
            }
        ]
    ]
}

The default options that will be used are:

{
    "mode": "wrap",
    "ignoreFilenames": ["node_modules"]
}

Default options can be overridden using the removePropTypes option. These options will be shallow-merged with the defaults:

{
    "presets": [
        [
            "@anolilab/babel-preset",
            {
                "removePropTypes": {
                    "mode": "remove"
                }
            }
        ]
    ]
}

For example, if you are using this plugin in a deployable app, you want to use the remove mode for your production build (and disable this transform entirely in development for optimal build speeds).

Selective loose modes

By default, this preset will compile everything in normal mode. This is safer, but comes with bundle size and runtime overhead. We have options to selectively opt in to loose mode for features. These options are:

• classes: looseClasses
• computed properties: looseComputedProperties
• parameters: looseParameters
• template literals: looseTemplateLiterals

Example:

{
    "presets": [
        [
            "@anolilab/babel-preset",
            {
                "looseClasses": true,
                "looseComputedProperties": true,
                "looseParameters": true,
                "looseTemplateLiterals": true
            }
        ]
    ]
}

The risks of enabling loose classes are outlined in the Babel docs.

Specifying a babel runtime version

By default @babel/plugin-transform-runtime will assume the oldest version of the runtime to avoid importing helpers that don’t exist which would fail at runtime. This can result in newer helpers being inlined into modules (ex. objectSpread2) which increases bundle size.

To avoid this you can configure the preset to use the same version of the runtime that’s installed in your package.json.

Ex. If package.json has "@babel/runtime": "^7.5.5" then you can use:

{
    "presets": [
        [
            "@anolilab/babel-preset",
            {
                "runtimeVersion": "7.5.5"
            }
        ]
    ]
}

Note: This will result in a runtime breakage if the version passed into the anolilab preset is newer than the version of the babel runtime being used at build time.

Disabling plugin-transform-runtime

You can use the transformRuntime option to disable @babel/plugin-transform-runtime. Specifying false will disable the plugin. This option defaults to true.

Specifying module transforms

You can use the modules option to enable transformation of modules given to this preset:

{
    "presets": [
        [
            "@anolilab/babel-preset",
            {
                "modules": "auto"
            }
        ]
    ]
}

Both true and the option default auto will not transform modules if ES6 module syntax is already supported by the environment, or "commonjs" otherwise. false will not transform modules.

You can use the runtimeHelpersUseESModules option to prevent transformation of runtime helpers to CommonJS modules.

{
    "presets": [
        [
            "@anolilab/babel-preset",
            {
                "runtimeHelpersUseESModules": true
            }
        ]
    ]
}

true will not transform runtime helpers to CommonJS modules. false will transform runtime helpers to CommonJS modules. The option defaults to true if modules is set to false, and false otherwise.

Optimizations

• babel-plugin-annotate-pure-calls: Injects for #__PURE annotations to enable treeshaking
• babel-plugin-dev-expressions: A mirror of Facebook's dev-expression Babel plugin. It reduces or eliminates development checks from production code

Development-only Expressions + Treeshaking

babel-plugin-annotate-pure-calls + babel-plugin-dev-expressions work together to fully eliminate dead code (aka treeshake) development checks from your production code. Let's look at an example to see how it works.

Supported Node.js Versions

Libraries in this ecosystem make the best effort to track Node.js' release schedule. Here's a post on why we think this is important.

Contributing

If you would like to help take a look at the list of issues and check our Contributing guild.

Note: please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Credits

• Daniel Bannert
• All Contributors

License

The anolilab javascript-style-guide is open-sourced software licensed under the MIT license