Awesome Babel

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.

Parsers

• babel-eslint2k 163 - 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.

Plugins

General Plugins

• external-helpers - Moves helper functions to a single imported module.
• fast-async330 12 - Uses nodent to compile async/await to fast Promise output.
• feature-flags16 4 - Helper for managing application feature flags.
• idx567 28 - library + babel plugin for a existential function.
• transform-builtin-extend52 6 - Enable extending builtin types like Error and Array, which require special treatment and require static analysis to detect.

Module Resolution

• lodash957 58 - Cherry-picks Lodash modules so you don’t have to.
• ramda121 16 - Cherry-picks Ramda modules so you don’t have to.
• module-resolver1k 81 - Custom module resolver.
• root-import - Import modules from the root with require('~/foo') syntax.
• webpack-alias78 30 - Allows you to use webpack aliases and most of webpack resolve features in Babel.

React

• React Optimize1k 32 - A Babel preset and plugins for optimizing React code.
• React Transform1k 108 - Instrument React components with custom transforms.
• react-docgen32 5 - Makes propTypes comments accessible at runtime for use with documentation generators.
• react-require81 11 - Adds React import declaration if file contains JSX tags.
• transform-react-remove-prop-types561 38 - Removes unnecessary React propTypes from the production build.
• transform-react-jsx-self25k 3k - Adds a __self property to JSX tags for debugging. Don't use in production. More info25k 3k
• 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-hyperscript4 1 - HyperScript syntax for React components without runtime overhead.
• react-import-extends - Extends Component if a class renders a JSX element, also adds import statement if it detects a JSX component in the file.

Internationalization

• c-3po - Localization tool based on es6 template literals.
• react-intl6k 492 - Extracts string messages for translation from modules that use React Intl6k 492 .

Types

• flow-runtime481 30 - Turns Flow annotations into runtime checks. Part of Flow-Runtime.
• tcomb410 19 - Turns Flow annotations into typechecks with tcomb1k 108 .
• jsdoc-to-assert35 2 - Turns JSDoc into runtime checks.
• runtyper47 3 - Detects type-mismatch operations in runtime without annotations.

Testing

• espower70 5 - Annotates call sites for descriptive messages when using power-assert1k 36 .
• istanbul302 43 - Instruments your code with Istanbul coverage.
• rewire585 74 - Adds the ability to rewire module dependencies. This enables to mock modules for testing purposes.

Optimization

• groundskeeper-willie - Removes debugger and console calls.
• loop-optimizer14 2 - Transforms .forEach and .map calls to for loops. 🔧
• closure-elimination288 18 - Transforms closures into separate functions.
• preval614 54 - Pre-evaluate code at build-time.
• transform-named-imports - Avoid including code that you don't need from modules you're importing.

Syntax Sugar

• implicit-return11 2 - Transforms last statement in a function block to a return statement.
• transform-iota - Golang-style iota(). 🔧
• offside-js2 1 - Coffeescript-like indented block syntax hack. 🔧🚧
• trace - Syntax shortcuts for console logging.
• meaningful-logs9 1 - 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 every Promise in async functions.

Alternative Programming Paradigms

• macros218 10 - Hygienic, non-syntactic macros. 🔧
• contracts177 1 - Design by Contract; Includes preconditions, postconditions, and invariant conditions.
• transform-scala-lambda5 1 - Enable Scala-style lambdas (using _). 🔧
• partial-application - Scala/Kotlin-esque partial application syntax for JavaScript (using _). 🔧
• overload4 1 - Allow overloading default operators like + or === for specific classes. 🔧🚧
• babel-macros296 31 - Enables zero-config, importable babel plugins.
• holes - Holes (like Scala and Elixir) to help point-free programming, using operators as functions. 🔧

Presets

• env25k 3k - The recommended preset which includes transforms based on the specified environment (browsers, node, electron, etc).
• React - Babel preset for all React plugins.
• React Optimize1k 32 - A Babel preset and plugins for optimizing React code.

Tooling

• babel-watch222 24 - Reloads a node app on file changes.
• babel-time-travel - Time travel through babel transformations one by one.

License