vijaysutrave/awesome-babel

A list of awesome Babel plugins, presets, etc.

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.

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.

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.

Internationalization

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

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

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.

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.

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.

License