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
})
]
};
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_modulesrollup-plugin-babel
lets rollup use babel to transpile your codebabel-plugin-external-helpers
npm i -D rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers
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
};
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 modulesbuild/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 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:
- write code with new js features
- transpile code with babel
- keep es2015 modules
- rollup bundles your dependencies
- rollup converts es2015 modules to commonjs modules
- 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
})
];
Not written yet
Not written yet