@anansi/babel-preset

Production ready babel (with TypeScript!)

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
262Jun 24, 2021Dec 15, 2017Minified + gzip package size for @anansi/babel-preset in KB

Readme

Production ready babel (with TypeScript!)

CircleCI npm downloads npm version PRs Welcome

Configurable production-ready babel preset for React projects.

Why

  • Up to date best practices
  • Tight multi-plugin configuration
    • Plugins made to interop correctly together
    • Centralized configuration both simplifies and ensures correctness

Usage

Just include in .babelrc

{
  "presets": ["@anansi"]
}

Or configure options

Target node 10
{
  "presets": [
    [
      "@anansi",
      {
        "nodeTarget": "10"
      }
    ]
  ]
}
Use TypeScript
{
  "presets": [
    [
      "@anansi",
      {
        "typing": "typescript"
      }
    ]
  ]
}

React refresh

In dev mode, if react-refresh is installed it will be enabled.

Future language support

In addition to providing good production/development/testing transformations; some additional non-standard features are included:

Stage 3

Stage 2

Stage 1

Features

Options

typing: 'flow' | 'typescript' | false = false

Adds support for these typecheckers. These remove the typings so the output runs in the target environment. If false, no static typechecker will be supported.

Supports TypeScript 4.0

nodeTarget : ?string = undefined

Will run to target node instead of browsers. Specify a valid node string like "current", or "6.15".

If unset, will automatically target current node version when webpack is targetting node.

targets : ?object = undefined

Deprecated: Prefer using top-level targets instead

Set to { "esmodules": true } to produce extra optimal bundles for modern browsers that support ES modules. This will make use of @babel/preset-modules instead of @babel/preset-env, whose transforms are more compact and efficient.

NOT recommended for non-{ "esmodules": true }. Can be used to override @babel/preset-env targets for non-testing environment. Use a browserslist config instead.

Feel free to use the anansi browserlist config.

modules: string|false = false

Can be used to override our default of false in non-testing environments in case you want babel to transform imports.

Warning: something other than 'false' will disable HMR and 'tree shaking' in webpack

useESModules: boolean = !(env === 'test' || options.nodeTarget)

This uses the es6 module version of @babel/runtime. "This allows for smaller builds in module systems like webpack, since it doesn't need to preserve commonjs semantics."

Set this to false for maximum compatibility.

useBuiltIns: "usage" | "entry" | false = "entry"

This option configures how @anansi/babel-preset handles polyfills.

corejs: { version: 3, proposals: true }

Which core-js version to use when useBuiltIns is not false

minify: bool = false

Setting this to true will run the minifier babel-minify

Be sure to install babel-minify as it is listed as an optional peerdependency here.

loose: bool = false

  • class properties
  • private methods
  • all things in preset-env
  • legacy decorators

reactRequire: bool = true

Automatically add react import if JSX is used.

hotReloader: boolean = false

Using react-hot-reloader instead of react-refresh

reactConstantElementsOptions: { allowMutablePropsOnTags?: string[] } | false

Configures the options for react-constant-elements. Setting to false disables this optimization altogether. Note: this is only ever used in production mode

hasJsxRuntime

Use new jsx transform. Available in React >16.14.

  • With the new transform, you can use JSX without importing React.
  • Depending on your setup, its compiled output may slightly improve the bundle size.
  • It will enable future improvements that reduce the number of concepts you need to learn React.

Note: This is automatically set when using anansi webpack using the caller config

tsConfigPath

Specifies the tsconfig.json file location to automatically apply tsconfig path mapping.

.babelrc.js
module.exports = {
  presets: [['@anansi', { typing: 'typescript', tsConfigPath: '.' }]],
};

Merges with module resolver options

TS_CONFIG_PATH

Overrides tsConfigPath.

export TS_CONFIG_PATH = './tsconfig.json'

module-resolver options

resolverRoot

Sets the root root.

root = ['./src'];

RESOLVER_ROOT

Overrides resolverRoot.

export RESOLVER_ROOT = './src'

resolverAlias

JSON representation of the alias object option.

{
  "underscore": "lodash",
  "^@namespace/foo-(.+)": "packages/\\1"
}

RESOLVER_ALIAS

If RESOLVER_ALIAS env is set, it will override this setting. Be sure to JSON encode.

export RESOLVER_ALIAS = '{"underscore":"lodash","^@namespace/foo-(.+)":"packages/\\\\1"}'

resolver

Full control of module-resolver options. Sets as default, so resolverRoot and resolverAlias will override root and alias respectively.

root-import options

rootPathSuffix: string = './src'

Enables importing from project root with ~/my/path rather than using relative paths. Override this if your project root is in another directory.

This is the recommended way to manage imports in larger libraries.

When using with typescript, be sure to add to tsconfig.json:

{
  "baseUrl": "./src",
  "paths": { "~/*": ["*"] }
}

rootPathPrefix: string = '~/'

Configures what prefix is used to trigger root imports.

rootPathRoot: undefined

Controls the root. No value (undefined) means use current working directory.

Sending __dirname from a .babelrc.js can be useful to ensure consistency no matter where babel starts running from.

Polyfills

Usage of features that require polyfills is automatically detected and included in many cases. However, some features (Intl, requestIdleCallback and fetch) are not. We recommend using @anansi/polyfill to cover those cases.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.