Babel

Gatsby leverages Babel to provide support for both older browsers and modern JavaScript development paradigms. By default, Gatsby’s Babel configuration guarantees support for the previous two versions of commonly used browsers, Internet Explorer 9+, and any other browser having more than 1% market share.

Babel in Gatsby automatically transpiles all JavaScript to ensure that all written code (including polyfills, alternative code for earlier browsers without support for certain features that are automatically added during the Gatsby build process) functions properly in older browsers. Gatsby provides a default .babelrc configuration file that supports compatibility for the vast majority of Gatsby sites. To customize this configuration file to your unique requirements, first install babel-preset-gatsby:

$ npm install --save-dev babel-preset-gatsby

Then, create a new overriding .babelrc configuration file in your Gatsby project root to include additional plugins, presets, and other settings. For example, passing the targets option object containing a browsers key with an array of specified browsers will override Gatsby’s default supported browsers according to your configuration:

// .babelrc
{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ],
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ]
}

From this point forward, you can also copy certain default settings from the babel-preset-gatsby preset and override them as needed.

NOTE

For more information about which browsers are supported by Gatsby and other means to adjust this list, consult the Gatsby documentation’s guide to browser support.