A list of awesome Babel plugins, presets, etc. Many of these are from the community, but some are lesser-known plugins in the Babel organization that may be useful to you.
As always, use caution when trying out Babel plugins, especially those marked as π§ experimental or π§π§ under construction.
If you want to contribute, please read the contribution guidelines.
- babel-eslint - ESLint using Babel as the parser.
- Note: ESLint now lints most ES6+ syntax. This parser is only necessary if you are using Flow types or other experimental features.
- external-helpers - Moves helper functions to a single imported module.
- fast-async - Uses nodent to compile async/await to fast Promise output.
- feature-flags - Helper for managing application feature flags.
- idx - library + babel plugin for a existential function.
- transform-builtin-extend - Enable extending builtin types like
Error
andArray
, which require special treatment and require static analysis to detect. - console-source - Prepends the file name and line numbers for all console commands
- version - Babel plugin replace defined identifier
__VERSION__
to pkg.version.
- lodash - Cherry-picks Lodash modules so you donβt have to.
- ramda - Cherry-picks Ramda modules so you donβt have to.
- module-resolver - Custom module resolver.
- root-import - Import modules from the root with
require('~/foo')
syntax. - webpack-alias - Allows you to use webpack aliases and most of webpack resolve features in Babel.
- hash-resolve - Allows you to use
require('#/path')
instead ofrequire('../../path')
, the number of../
needed is worked out by the plugin
- React Optimize - A Babel preset and plugins for optimizing React code.
- React Transform - Instrument React components with custom transforms.
- react-docgen - Makes propTypes comments accessible at runtime for use with documentation generators.
- react-require - Adds React import declaration if file contains JSX tags.
- transform-react-remove-prop-types - Removes unnecessary React propTypes from the production build.
- transform-react-jsx-self - Adds a
__self
property to JSX tags for debugging. Don't use in production. More info - transform-react-constant-elements - Hoist elements that can be marked as constant to the highest scope for reuse.
- transform-react-inline-elements - Replaces
React.createElement()
with a helper that is more optimized for production. - react-hyperscript - HyperScript syntax for React components without runtime overhead.
- react-import-extends - Extends
Component
if a class renders a JSX element, also addsimport
statement if it detects a JSX component in the file. - babel-plugin-transform-react-class-to-function - Transforms React class components into a function, if possible.
- babel-plugin-hoist-facc - Transforms function as child components to hoist the children function to highest scope.
- react-hiccup - Hiccup syntax for React components.
- babel-plugin-framer-x - Removes Framer X markup from your components. Lets you use Framer X components in a Storybook or real application.
- babel-plugin-react-directive - Use directive in React, for example, you can use
r-if
γr-for
in jsx just asv-if
γv-for
in Vue. - zacs - "styled components"-ish syntax without performance overhead
- babel-plugin-typescript-to-proptypes - Generate React PropTypes from TypeScript interfaces or type aliases.
- c-3po - Localization tool based on es6 template literals.
- react-intl - Extracts string messages for translation from modules that use React Intl.
- localize - Modify static jsx text and string attributes with function call. π§
- flow-runtime - Turns Flow annotations into runtime checks. Part of Flow-Runtime.
- tcomb - Turns Flow annotations into typechecks with tcomb.
- jsdoc-to-assert - Turns JSDoc into runtime checks.
- runtyper - Detects type-mismatch operations in runtime without annotations.
- espower - Annotates call sites for descriptive messages when using power-assert.
- istanbul - Instruments your code with Istanbul coverage.
- rewire - Adds the ability to rewire module dependencies. This enables to mock modules for testing purposes.
- groundskeeper-willie - Removes debugger and console calls.
- loop-optimizer - Transforms
.forEach
and.map
calls to for loops. π§ - closure-elimination - Transforms closures into separate functions.
- preval - Pre-evaluate code at build-time.
- transform-named-imports - Avoid including code that you don't need from modules you're importing.
- faster.js - Transforms native
Array
methods into faster equivalents. π§ - optimize-i18n - Optimizing i18n bundle file by shorten the locale key.
- cloudinary - Compile cloudinary URLs at build time.
- object-to-json-parse - Converts from object literal to
JSON.parse
.
- implicit-return - Transforms last statement in a function block to a return statement.
- transform-iota - Golang-style
iota()
. π§ - offside-js - Coffeescript-like indented block syntax hack. π§π§
- trace - Syntax shortcuts for console logging.
- meaningful-logs - Adds file name and line number of caller to
console.log()
calls. - implicit-function - Implicit functions via
~
operator, transforming, for example,~x
in() => x
. - function-composition - Function piping and composition via
&
operator, for example,toUpper & console.log
. - auto-await - Automatically
await
everyPromise
inasync
functions.
- macros - Hygienic, non-syntactic macros. π§
- contracts - Design by Contract; Includes preconditions, postconditions, and invariant conditions.
- transform-scala-lambda - Enable Scala-style lambdas (using
_
). π§ - partial-application - Scala/Kotlin-esque partial application syntax for JavaScript (using
_
). π§ - overload - Allow overloading default operators like
+
or===
for specific classes. π§π§ - babel-macros - Enables zero-config, importable babel plugins.
- holes - Holes (like Scala and Elixir) to help point-free programming, using operators as functions. π§
- env - The recommended preset which includes transforms based on the specified environment (browsers, node, electron, etc).
- React - Babel preset for all React plugins.
- React Optimize - A Babel preset and plugins for optimizing React code.
- babel-watch - Reloads a node app on file changes.
- babel-time-travel - Time travel through babel transformations one by one.