Skip to content

😎A list of awesome Babel plugins, presets, etc.

License

Notifications You must be signed in to change notification settings

babel/awesome-babel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

79 Commits
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Awesome Babel 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.
  • babel-plugin-debug-tools Babeljs Debug Tools helps you insert debug code and easely remove it when deploy to production

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
  • rewrite-module-path - Rewrite module resolving path.

React

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

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

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

License

CC0