Set up Rollup with Babel and Jest

Rollup Configuration

Here is the entire rollup configuration. Notice that instead of using a
.babelrc file, we're specifying the configuration in the babel function
provided by rollup-plugin-babel. See below to follow it step-by-step.

import resolve from "rollup-plugin-node-resolve";
import babel from "rollup-plugin-babel";

export default {
  input: "src/index.js",
  output: [
    {
      file: "build/index.cjs.js",
      format: "cjs"
    },
    {
      file: "build/index.es.js",
      format: "es"
    }
  ],
  plugins: [
    resolve(),
    babel({
      presets: [
        [
          "env",
          {
            modules: false
          }
        ]
      ],
      plugins: ["external-helpers"],
      babelrc: false
    })
  ]
};

What You'll Need

Install rollup if you haven't done so already, and then make a file called
rollup.config.js in your root directory. See the
official docs for more details.

npm install --global rollup

You'll need the following packages:

• rollup-plugin-node-resolve
  lets rollup use third-party modules in node_modules
• rollup-plugin-babel lets
  rollup use babel to transpile your code
• babel-plugin-external-helpers

npm i -D rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers

Imports

Notice we're importing two plugins rollup-plugin-node-resolve and
rollup-plugin-babel. We'll make use of these in our export.

import resolve from "rollup-plugin-node-resolve";
import babel from "rollup-plugin-babel";

export default {
  // code goes here
};

Inputs and Outputs

For the input field, specify the entry point of your project. It will most
likely be in src/index.js. This tells rollup where to start, so that it can
bundle all the dependencies starting from the entry point.

For the output field, I like having two fields, one for commonjs modules, and
another for es2015 modules. This means you'll pass in an array to output, with
the target of each file and the format they'll be in.

We'll have two builds:

• build/index.cjs.js exports commonjs modules
• build/index.es.js exports es2015 modules

// in exports default {} of rollup.config.js
  input: "src/index.js",
  output: [
    {
      file: "build/index.cjs.js",
      format: "cjs"
    },
    {
      file: "build/index.es.js",
      format: "es"
    }
  ],

Plugins

Plugins are the most difficult part of the configuration. In this example we're
only using two, but there are plenty of reasons to use other ones. These are
fairly common.

We'll call resolve() in our plugins, and we'll also call babel(). Notice
that we're passing a babel configuration directly into babel().

For rollup, it's important that we set {modules: false}, as it tells babel not
to transpile es2015 modules. The workflow goes like this:

1. write code with new js features
2. transpile code with babel
3. keep es2015 modules
4. rollup bundles your dependencies
5. rollup converts es2015 modules to commonjs modules
6. Now you're done

Furthermore, we set {babelrc: false}, which means that babel won't look for a
.babelrc file at this step. It will just use what we have specified here.

plugins: [
  resolve(),
  babel({
    presets: [
      [
        "env",
        {
          modules: false
        }
      ]
    ],
    plugins: ["external-helpers"],
    babelrc: false
  })
];

Babel Configuration

Not written yet

Jest Configuration

Not written yet