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

Plugins

General Plugins

• 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 and Array, 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.

Module Resolution

• 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 of require('../../path'), the number of ../ needed is worked out by the plugin

React

• 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 adds import 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 as v-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.

Internationalization

• 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. 🔧

Types

• 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.

Testing

• 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.

Optimization

• 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.

Syntax Sugar

• 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 every Promise in async functions.

Alternative Programming Paradigms

• 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. 🔧

Presets

• 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.

Tooling

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

License