@wpackio/babel-preset-base

This is the default base babel preset to include in projects. It is based on @babel/preset-env, @babel/preset-react and includes some stage-3 plugins.

Installation

If using yarn

yarn add @wpackio/babel-preset-base @babel/core --dev

or with npm

npm i @wpackio/babel-preset-base @babel/core --save-dev

Usage

In your .babelrc put

{
	"extends": ["@wpackio/base"]
}

or in your babel.config.js/babelrc.js

module.exports = {
	extends: ['@wpackio/base'],
};

Per babel package naming shorthands we can use both @wpackio/base or @wpackio/babel-preset-base as the preset name.

NOTE: babel.config.js is used for project wide configuration. Please refer to the docs to find out which config formatting to use.

Configuration

.browserslistrc

This preset is primarily based on @babel/preset-env and @babel/preset-react.

You should add .browserslistrc to your project to target your environment. More information can be found here.

In most cases, you just need to put a browser query in your .browserslistrc like

> 0.25%, not dead

and you are good to go.

You can also put it under browserslist directive under package.json file.

We recommend .browserslistrc because it is shared across many tools. If you bootstrap your project using npx @wpackio/scripts bootstrap, then it will be created automatically.

Options

The following babel plugins from stage-3 are included as dependencies. They will be loaded by default, but you can disable it through options.

• @babel/plugin-syntax-dynamic-import
• @babel/plugin-syntax-import-meta
• @babel/plugin-proposal-class-properties - with option { "loose": false }.
• @babel/plugin-proposal-json-strings
• @babel/plugin-transform-runtime - with options {corejs: false, helpers: true, regenerator: true, useESModules: true }
• @babel/plugin-proposal-nullish-coalescing-operator

@wpackio/babel-preset-base can be configured to select which stage-3 plugins to exclude.

babelrc.js

module.exports = {
	extends: [
		'@wpackio/base',
		{
			noDynamicImport: true, // disable @babel/plugin-syntax-dynamic-import
			presetEnv: {
				target: 'not dead, > 0.25%', // browserslist query to pass to @babel/preset-env
			},
		},
	],
};

hasReact

boolean, defaults to true.

Set to false to completely disable all @babel/preset-react configuration.

noDynamicImport

boolean, defaults to false.

Set to true to disable @babel/plugin-syntax-dynamic-import.

noImportMeta

boolean, defaults to false.

Set to true to disable @babel/plugin-syntax-import-meta.

noClassProperties

boolean, defaults to false.

Set to true to disable @babel/plugin-proposal-class-properties.

noJsonStrings

boolean, defaults to false.

Set to true to disable @babel/plugin-proposal-json-strings.

noRuntime

boolean, defaults to false.

Set to true to disable @babel/plugin-transform-runtime.

noOptionalChaining

boolean, defaults to false.

Set to true to disable @babel/plugin-proposal-optional-chaining.

noNullishCoalescingOperator

boolean, defaults to false.

Set to true to disable @babel/plugin-proposal-nullish-coalescing-operator.

presetEnv Options for @babel/preset-env

object, defaults to {}.

What-ever you pass to the presetEnv directive, is passed directly to @babel/preset-env. This gives you more control on how to configure the @babel/preset-env preset.

Please read the documentation for available options.

presetReact Options for @babel/preset-react

object, defaults to {}.

What ever you define here, is passed directly to @babel/preset-react. So consult the documentation to find out how to use it.

Note on presetReact.development

@babel/preset-react has an option development which, if enabled, includes two development friendly plugins. @wpackio/babel-preset-base automatically sets its value, depending on BABEL_ENV environment variable. This environment variable is taken care of automatically, when you are using @wpackio/scripts.

However, you can pass a Boolean value to presetReact.development and it will be used instead.

.babelrc

{
	"extends": [
		[
			"@wpackio/babel-preset-base",
			{
				"presetReact": {
					"development": false
				}
			}
		]
	]
}

Development

This package has the same npm scripts as this monorepo. These should be run using lerna run <script>. More information can be found under CONTRIBUTION.md.

• build: Use babel to build for nodejs 8.6+. Files inside src are compiled and put under lib. All type definitions are stripped and individual type declaration files are created.
• prepare: Run build after yarn and before publish.
• lint: Lint all files using eslint.
• test: Run tests on files using jest.