redsift/rollup-bundler

Rollup wrapper to create ESM and UMD bundles with zero config support.

rollup-bundler

Installation

yarn add --dev @redsift/rollup-bundler @babel/runtime

Usage

CLI

From the command line use either

npx rollup-bundler for zero config usage or

npx rollup-bundler my-config-file.js to apply a custom configuration.

package.json

You can add the bundler to your package.json file with a script like this (name is arbitrary):

"scripts": {
  ...
  "build": "rollup-bundler"
}

or with a custom configuration:

"scripts": {
  ...
  "build": "rollup-bundler my-config-file.js"
}

Zero Config Usage

This module has a 'zero config' setup which takes takes a ES5/ES2015+

./src/index.js

as input and outputs

./dist
├── dist/my-module.esm.js      <--- ESM module file with ES5 syntax
├── dist/my-module.esm.minjs   <--- minified version of the above (for the `module` field in `package.json`)
├── dist/my-module.umd.js      <--- UMD module file with ES5 syntax
├── dist/my-module.umd.min.js  <--- minified version of the above (for the `main` field in `package.json`)

The my-module name is derived from the package.json name field.

You don't need a .babelrc file, but babel-preset-env and babel-plugin-external-helpers need to be installed as (dev) dependencies.

Custom Usage

To use a different input file and/or output to a different folder create a configuration file, e.g. bundle.config.js:

module.exports = {
  input: `./index.js`,
  output: {
    file: "anotherdist/my-different-module-name.js",
    name: "MyDifferentModuleName"
  },
  pluginConfigs: {
    commonjs: {
      namedExports: {
        "node_modules/a-common-js-module-with-unsupported-export/index.min.js": [
          "MyCustomNamedExport"
        ]
      }
    }
  }
};

The config format follows rollup's configuration for input and output fields but adds a pluginConfig field to specify custom options for rollup plugins used by the bundler. Each named plugin key (e.g. commonjs) is used verbatim as options object for the respective rollup plugin. This is the list of configurable plugins:

• json
• babel
• resolve
• commonjs

The above custom configuration will produce the following output:

./dist
├── anotherdist/my-different-module-name.esm.js      <--- ESM module file with ES5 syntax
├── anotherdist/my-different-module-name.esm.minjs   <--- minified version of the above (for the `module` field in `package.json`)
├── anotherdist/my-different-module-name.umd.js      <--- UMD module file with ES5 syntax
├── anotherdist/my-different-module-name.umd.min.js  <--- minified version of the above (for the `main` field in `package.json`)

Use your own .babelrc

If the root folder of your project contains a .babelrc the bundler will use it. The bundler will also add the external-helpers plugin automatically to optimize the bundle.

If you are experiencing erros related to the node_modules/babel-runtime package and are using using the transform-runtime plugin please make sure to disable the helpers option like this in your .babelrc:

{
  "presets": ...,
  "plugins": [
    ["@babel/transform-runtime", { "helpers": false }]
  ]
}

The optimization of the helpers will be done by the external-helpers plugin.

Bundle visualization

The bundler creates a visual overview of the output bundle to see which packages contribute to the filesize. The output is created as stats.html.

This project is based on rollup-config-builder.

rollup-bundler's Issues

Additional packages

• rollup-plugin-visualizer
• rollup-plugin-filesize
• rollup-plugin-bundle-size