Babel is all about plugins and presets:

  • Plugins

    • Plugins are individual JavaScript transformations that focus on specific language features or syntax improvements.

    • Developers can select and configure plugins to meet their project’s needs.

    • For example, a developer working on a legacy project targeting older browsers can opt to include plugins that only transpile ES6 code to ES5 without introducing newer language features.

    • Example: @babel/plugin-transform-arrow-functions : This plugin used to convert modern arrow functions into older function syntax.

    • Full List of plugins is available here.

  • Presets

    • Babel presets can act as sharable set of Babel plugins and/or config.

    • Presets are collections of preconfigured plugins that address common use cases or JavaScript language versions.

    • Babel offers presets like @babel/preset-env that intelligently select the necessary plugins based on target environments. This simplifies configuration and ensures that only essential transformations are applied, keeping output code lean and optimized.

  • Points To Keep in Mind when using Plugins and Presets:

    • Plugins run before Presets.
    • Plugin ordering is first to last.
    • Preset ordering is reversed (last to first).