• Configuring Babel (Advanced)
    • Manually specifying plugins
    • Plugin options
    • Customizing Babel based on environment
    • Making your own preset

    Configuring Babel (Advanced)

    Most people can get by using Babel with just the built-in presets, but Babel exposes much finer-grained power than that.

    Manually specifying plugins

    Babel presets are simply collections of pre-configured plugins, if you want to do something differently you manually specify plugins. This works almost exactly the same way as presets.

    First install a plugin:

    1. $ npm install --save-dev babel-plugin-transform-es2015-classes

    Then add the plugins field to your .babelrc.

    1.   {
    2. +   "plugins": [
    3. +     "transform-es2015-classes"
    4. +   ]
    5.   }

    This gives you much finer grained control over the exact transforms you are running.

    For a full list of official plugins see the Babel Plugins page.

    Also take a look at all the plugins that have been built by the community. If you would like to learn how to write your own plugin read the Babel Plugin Handbook.

    Plugin options

    Many plugins also have options to configure them to behave differently. For example, many transforms have a “loose” mode which drops some spec behavior in favor of simpler and more performant generated code.

    To add options to a plugin, simply make the following change:

    1.   {
    2.     "plugins": [
    3. -     "transform-es2015-classes"
    4. +     ["transform-es2015-classes", { "loose": true }]
    5.     ]
    6.   }

    I’ll be working on updates to the plugin documentation to detail every option in the coming weeks. Follow me for updates.

    Customizing Babel based on environment

    Babel plugins solve many different tasks. Many of them are development tools that can help you debugging your code or integrate with tools. There are also a lot of plugins that are meant for optimizing your code in production.

    For this reason, it is common to want Babel configuration based on the environment. You can do this easily with your .babelrc file.

    1.   {
    2.     "presets": ["es2015"],
    3.     "plugins": [],
    4. +   "env": {
    5. +     "development": {
    6. +       "plugins": [...]
    7. +     },
    8. +     "production": {
    9. +       "plugins": [...]
    10. +     }
    11.     }
    12.   }

    Babel will enable configuration inside of env based on the current environment.

    The current environment will use process.env.BABEL_ENV. When BABEL_ENV is not available, it will fallback to NODE_ENV, and if that is not available it will default to "development".

    Unix

    1. $ BABEL_ENV=production [COMMAND]
    2. $ NODE_ENV=production [COMMAND]

    Windows

    1. $ SET BABEL_ENV=production
    2. $ [COMMAND]

    Note: [COMMAND] is whatever you use to run Babel (ie. babel, babel-node, or maybe just node if you are using the register hook).

    Tip: If you want your command to work across unix and windows platforms then use cross-env.

    Making your own preset

    Manually specifying plugins? Plugin options? Environment-based settings? All this configuration might seem like a ton of repetition for all of your projects.

    For this reason, we encourage the community to create their own presets. This could be a preset for the specific node version you are running, or maybe a preset for your entire company.

    It’s easy to create a preset. Say you have this .babelrc file:

    1. {
    2.   "presets": [
    3.     "es2015",
    4.     "react"
    5.   ],
    6.   "plugins": [
    7.     "transform-flow-strip-types"
    8.   ]
    9. }

    All you need to do is create a new project following the naming convention babel-preset-* (please be responsible with this namespace), and create two files.

    First, create a new package.json file with the necessary dependencies for your preset.

    1. {
    2.   "name": "babel-preset-my-awesome-preset",
    3.   "version": "1.0.0",
    4.   "author": "James Kyle <me@thejameskyle.com>",
    5.   "dependencies": {
    6.     "babel-preset-es2015": "^6.3.13",
    7.     "babel-preset-react": "^6.3.13",
    8.     "babel-plugin-transform-flow-strip-types": "^6.3.15"
    9.   }
    10. }

    Then create an index.js file that exports the contents of your .babelrc file, replacing plugin/preset strings with require calls.

    1. module.exports = function () {
    2.   presets: [
    3.     require("babel-preset-es2015"),
    4.     require("babel-preset-react")
    5.   ],
    6.   plugins: [
    7.     require("babel-plugin-transform-flow-strip-types")
    8.   ]
    9. };

    Then simply publish this to npm and you can use it like you would any preset.