README
Production ready babel (with TypeScript!)
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
{
"targets": { "node": "10" },
"presets": [
[
"@anansi"
]
]
}
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 4
Stage 3
Stage 2
- Records and Tuples
- Be sure to add @bloomberg/record-tuple-polyfill
- Warning: this doesn't work with TypeScript
Stage 1
export v from 'mod';
(Disabled when using TypeScript)Decimal
parsing
Features
- Speed up reconciliation and reduce garbage collection in production
- Babel Macros
- TypeScript
- Module resolver
- Root import
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.5
nodeTarget : ?string = undefined
Deprecated: Prefer using top-level
targets
instead
{
"targets": { "node": "current" },
"presets": ["@anansi"]
}
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: "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.
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."
By default, tries to infer whether this can be used.
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.