# @anansi/babel-preset

> Production ready babel (with TypeScript!)

Latest version **7.0.1** (published 2026-10-18) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install @anansi/babel-preset
pnpm add @anansi/babel-preset
yarn add @anansi/babel-preset
bun add @anansi/babel-preset
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 7.0.1 |
| Published | 2026-10-18 |
| First published | 2017-12-31 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Node | ^22.18.0 \|\| >=24.11.0 |
| Dependencies | 22 |
| Unpacked size | 141.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 39 |
| Author | Nathaniel Tucker |
| Maintainers | ntucker |
| Keywords | babel, preset, react, react-refresh, typescript, macros, esnext, class initialization, jsx transform |

## Links

- npm: https://www.npmjs.com/package/@anansi/babel-preset
- Repository: https://github.com:ntucker/anansi
- Homepage: https://github.com/ntucker/anansi/tree/master/packages/babel-preset-anansi#readme
- Issues: https://github.com/ntucker/anansi/issues
- npm.io page: https://npm.io/package/@anansi/babel-preset

## Dependencies (22)

- [path](https://npm.io/package/path.md) ^0.12.7
- [core-js-compat](https://npm.io/package/core-js-compat.md) ^3.40.0
- [glob-to-regexp](https://npm.io/package/glob-to-regexp.md) ^0.4.1
- [@anansi/ts-utils](https://npm.io/package/@anansi/ts-utils.md) ^0.3.12
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^8.0.7
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^8.0.1
- [babel-plugin-macros](https://npm.io/package/babel-plugin-macros.md) ^3.1.0
- [babel-plugin-root-import](https://npm.io/package/babel-plugin-root-import.md) ^6.6.0
- [babel-plugin-react-compiler](https://npm.io/package/babel-plugin-react-compiler.md) 1.0.0
- [babel-plugin-module-resolver](https://npm.io/package/babel-plugin-module-resolver.md) ^5.0.3
- [babel-plugin-polyfill-corejs3](https://npm.io/package/babel-plugin-polyfill-corejs3.md) ^1.0.0
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^8.0.6
- [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^8.0.2
- [@babel/plugin-transform-typescript](https://npm.io/package/@babel/plugin-transform-typescript.md) ^8.0.6
- [babel-plugin-transform-import-meta](https://npm.io/package/babel-plugin-transform-import-meta.md) ^3.1.0
- [@babel/plugin-transform-private-methods](https://npm.io/package/@babel/plugin-transform-private-methods.md) ^8.0.1
- [@babel/plugin-transform-class-properties](https://npm.io/package/@babel/plugin-transform-class-properties.md) ^8.0.1
- [@babel/plugin-proposal-export-default-from](https://npm.io/package/@babel/plugin-proposal-export-default-from.md) ^8.0.1
- [@babel/plugin-transform-class-static-block](https://npm.io/package/@babel/plugin-transform-class-static-block.md) ^8.0.5
- [@babel/plugin-transform-react-inline-elements](https://npm.io/package/@babel/plugin-transform-react-inline-elements.md) ^8.0.1
- [babel-plugin-transform-react-remove-prop-types](https://npm.io/package/babel-plugin-transform-react-remove-prop-types.md) ^0.4.24
- [@babel/plugin-transform-react-constant-elements](https://npm.io/package/@babel/plugin-transform-react-constant-elements.md) ^8.0.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 7.0.1 (latest) — 2026-10-18
- 0.5.1-beta.1 (beta) — 2018-09-24
- 7.0.0 — 2026-10-13
- 6.2.27 — 2026-06-21
- 6.2.26 — 2026-05-03
- 6.2.25 — 2026-03-20
- 6.2.24 — 2026-03-11
- 6.2.23 — 2026-02-13
- 6.2.22 — 2026-01-13
- 6.2.21 — 2026-01-02
- 6.2.20 — 2025-12-07
- 6.2.19 — 2025-11-16
- 6.2.18 — 2025-11-15
- 6.2.17 — 2025-11-09
- 6.2.16 — 2025-10-28
- … 311 more at https://npm.io/package/@anansi/babel-preset/versions

## README

# Production ready babel (with TypeScript!)

[![CircleCI](https://circleci.com/gh/ntucker/anansi.svg?style=shield)](https://circleci.com/gh/ntucker/anansi)
[![npm downloads](https://img.shields.io/npm/dm/@anansi/babel-preset.svg?style=flat-square)](https://www.npmjs.com/package/@anansi/babel-preset)
[![npm version](https://img.shields.io/npm/v/@anansi/babel-preset.svg?style=flat-square)](https://www.npmjs.com/package/@anansi/babel-preset)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

Configurable production-ready babel preset for React projects with TypeScript support.

This preset is Babel 8-first. Running Babel with it requires a modern Node.js runtime.

### 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

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

Or configure [options](#options)

<details><summary><b>Target node 10</b></summary>

```json
{
  "targets": { "node": "10" },
  "presets": [
    [
      "@anansi"
    ]
  ]
}
```
</details>

<details><summary><b>Set assumptions</b></summary>

```json
{
  "presets": ["@anansi"],
  "assumptions": {
    "noDocumentAll": true,
    "noClassCalls": true,
    "constantReexports": true,
    "objectRestNoSymbols": true,
    "pureGetters": true
  }
}
```
</details>

## React refresh

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

## TypeScript

TypeScript files (`.ts`, `.tsx`, `.mts`, `.cts`, etc) are supported by removing their typings to output
javascript that node/browsers can understand.
`.ts`, `.mts` and `.cts` files don't parse JSX, so they can use `<T>(x: T) => x` and `<T>value`.

## Future language support

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

### Stage 4

- [Module level await](https://github.com/tc39/proposal-top-level-await)

### Stage 3

- [Decorators](https://github.com/tc39/proposal-decorators)

### Stage 1

- [`export v from 'mod';`](http://babeljs.io/docs/en/next/babel-plugin-proposal-export-default-from) (Disabled when using TypeScript)
- [`Decimal` parsing](https://github.com/tc39/proposal-decimal)

## Features

- [Speed up reconciliation and reduce garbage collection in production](https://github.com/facebook/react/issues/3226)
- [Babel Macros](https://github.com/kentcdodds/babel-plugin-macros)
- [TypeScript](https://www.typescriptlang.org/)
  - [TypeScript tsconfig paths support](#tsconfigpath)
- [Module resolver](https://github.com/tleunen/babel-plugin-module-resolver)
- [Root import](https://github.com/entwicklerstube/babel-plugin-root-import#readme)

## Options

Options to the preset. These are configured like so

```json
{
  "presets": [
    [
      "@anansi",
      {
        "optionName": "optionValue"
      }
    ]
  ]
}
```

### Target Environment

#### nodeTarget : ?string = undefined

> Deprecated: Prefer using [top-level](https://babel.dev/blog/2021/02/22/7.13.0#top-level-targets-option-12189httpsgithubcombabelbabelpull12189-rfchttpsgithubcombabelrfcspull2) `targets` instead

```json
{
  "targets": { "node": "current" },
  "presets": ["@anansi"]
}
```

Will run to target node instead of browsers. Specify a [valid node string](https://babeljs.io/docs/en/babel-preset-env#targetsnode) 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](https://babel.dev/blog/2021/02/22/7.13.0#top-level-targets-option-12189httpsgithubcombabelbabelpull12189-rfchttpsgithubcombabelrfcspull2) `targets` instead

Use this to override `@babel/preset-env` targets for non-testing environments. In Babel 8,
`@babel/preset-env` defaults to modern Browserslist targets rather than ES5, so prefer a
[browserslist config](https://github.com/browserslist/browserslist#packagejson) or explicit top-level `targets`
when you need stable output across environments.

Feel free to use the [anansi browserlist config](/packages/browserslist-config-anansi).

#### modules: "amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false = false

Enable transformation of ES module syntax to another module type.

By default this tries to infer if ESModules is supported and if so, keep ESM. If this detection isn't
working correct, feel free to explicitly set.

#### BABEL_MODULES

This will override or set `modules` option from above.

### Polyfills

By default we try to conform to these design pricinpals:

- Libraries prefer to not introduce side-effects
  - Commonjs bundles should require polyfills instead of bundling to:
    - reduce file-size, parse time, and improve JIT opportunities
  - UMD bundles cannot import, therefore should bundle polyfills
- Applications prefer side-effect versions for simplicity
- Infer intent by detecting which runtime and polyfill package is explicitly installed in the CWD

#### polyfillMethod

‘usage-global’ | ‘entry-global’ | ‘usage-pure’ | false | undefined

This determines how to handle polyfills.

[plugin reference](https://github.com/babel/babel-polyfills/blob/main/docs/migration.md)

##### undefined

This is the default - it will automatically determine a reasonable default based on other factors.

For app builds with `core-js` installed:

1. 'usage-pure' if `core-js-pure` is installed and your package.json lists `core-js-pure` in `dependencies`,
   `peerDependencies` or `devDependencies` without `core-js` in that same field
2. Otherwise 'usage-global' if `@babel/runtime` is installed
3. Otherwise 'entry-global'

For library builds (@babel/cli, rollup or caller.library is true), or when `core-js` is not installed:
'usage-pure' if `core-js-pure` and `@babel/runtime-corejs3` are installed, otherwise `false`.

##### entry-global

Transforms core-js import into only the polyfills needed for the target environment. This can be best when
a good code-splitting strategy for polyfills is in the place.

Turns

```js
import 'core-js'
```

into

```js
import 'core-js/es/object/has-own'
// whatever else is needed for target env
```

Like [useBuiltins: entry](https://babeljs.io/docs/babel-preset-env#usebuiltins-entry) for babel-preset-env.

##### usage-global

Only imports polyfills as-needed both based on target environment and usage.

```js
import 'core-js/es/object/has-own'
Object.hasOwn({ a: 1 }, 'a')
```

Like [useBuiltins: usage](https://babeljs.io/docs/babel-preset-env#usebuiltins-usage) for babel-preset-env.

##### usage-pure

This doesn't pollute the global scope. This is recommended when bundling libraries.

```js
import _Object$hasOwn from "core-js-pure/stable/object/has-own.js"
_Object$hasOwn({ a: 1 }, 'a')
```

##### false

Do not perform any transforms related to core-js or polyfills.

#### corejsVersion

Specifies the core-js version to target. Without specified will use the version found by importing.

#### [useBuiltIns](https://babeljs.io/docs/en/babel-preset-env#usebuiltins): "usage" | "entry" | false = "entry"

> Deprecated compatibility alias. Prefer `polyfillMethod`.

This option configures how @anansi/babel-preset handles polyfills. Both `usage` and `entry` will
only include polyfills needed for the target.

`entry` allows you to control when/where the polyfills are loaded by
adding your own import of core-js. You can even import pieces selectively.

`usage` will add imports everywhere a file is used, which can make it harder to split polyfills if they
are not needed.

#### runtimePkg = "@babel/runtime"

Can be `@babel/runtime-corejs3`. Using the corejs version will
add imports to the 'pure' form of core-js, which doesn't change global objects. This will however
result in heavily increased bundle sizes, so it's generally preferred to stay with the default.

#### polyfillTargets

> POLYFILL_TARGETS env will override this option

Allows for different [output targets](https://babeljs.io/docs/options#targets) determining which polyfills to include than what
code transforms are applied.

This is sometimes useful when bundling library JS that must work in many environments, but one
expects the consumer of the library to handle legacy polyfills themselves.

Safari 15.4 came with Object.hasOwn(). Therefore this would disable inclusion of the Object.hasOwn polyfill (among others).

```json
{
  "presets": [
    [
      "@anansi",
      {
        "polyfillTargets": "safari>15.3"
      }
    ]
  ]
}
```

### Additional Transforms

#### loose: bool = false

Sets a broad group of top-level [`assumptions`](https://babeljs.io/docs/assumptions)
(class fields, spread, template objects and more). Babel 8 removed `loose` from `@babel/preset-env`
and deprecates it in plugins, so prefer listing the `assumptions` you want.

#### [decoratorsOptions](https://babeljs.io/docs/en/babel-plugin-proposal-decorators#options)

- `version`: "2023-11" or "legacy" (the only versions Babel 8 supports). defaults to "2023-11"

#### reactCompiler: {compilationMode?: "annotation"}

Run the [React Compiler](https://react.dev/learn/react-compiler). Be sure to
[check compatibility](https://react.dev/learn/react-compiler#checking-compatibility) before turning this on.

By default does not run. Include empty object or a configuration to turn on.

** Requires React 19+ **

** This only runs in production **

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

Configures the options for [react-constant-elements](https://babeljs.io/docs/en/babel-plugin-transform-react-constant-elements).
Setting to false disables this optimization altogether. Note: this is only ever used in production mode

#### hasJsxRuntime

** Defaults to `true`. Set this to `false` explicitly to use with React <=16.13 **

Use [new jsx transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html).
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](https://babeljs.io/docs/en/options#caller)

#### developmentSourceSelf: bool

Adds `__source`/`__self` to development JSX. React 19.2 stopped using them, so this defaults to
`true` only for React < 19.2. `@anansi/webpack-config` and `@anansi/jest-preset` detect the version for you;
otherwise it is read from the `react` installed at the current directory.

#### tsConfigPath

Specifies the tsconfig.json file location to automatically apply [tsconfig path mapping](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping).

<details><summary><b>.babelrc.js</b></summary>

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

</details>

Merges with [module resolver](#module-resolver-options) options

##### TS_CONFIG_PATH

Overrides `tsConfigPath`.

```bash
export TS_CONFIG_PATH = './tsconfig.json'
```

### module-resolver options

#### resolverRoot

Sets the root [root](https://github.com/tleunen/babel-plugin-module-resolver/blob/HEAD/DOCS.md#root).

```js
root = ['./src'];
```

##### RESOLVER_ROOT

Overrides `resolverRoot`.

```bash
export RESOLVER_ROOT = './src'
```

#### resolverAlias

JSON representation of the [alias](https://github.com/tleunen/babel-plugin-module-resolver/blob/HEAD/DOCS.md#alias) object option.

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

##### RESOLVER_ALIAS

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

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

#### resolver

Full control of [module-resolver options](https://github.com/tleunen/babel-plugin-module-resolver/blob/HEAD/DOCS.md).
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:

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

#### rootPathPrefix: string = '~/'

Configures what prefix is used to trigger root imports.

#### rootPathRoot: undefined

[Controls the root.](https://www.npmjs.com/package/babel-plugin-root-import#custom-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.

---
_Source: https://npm.io/package/@anansi/babel-preset · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._