🍣 /rollup

Rollup configurations for the best package bundling experience

Overview

This repo provides everything you need to use Rollup as your main library bundler: plugins, configurations, and utilities to work with them.

Simply import and call:

// rollup.config.js
import babel from '@azimutlabs/rollup-config-babel';

export default babel();

...and output is a single RollupOptions objects:

export default {
  /* ...other RollupOptions */
  input: '/root/project/src/index.js',
  output: { format: 'es', dir: '/root/project/lib' },
  plugins: [
    // @azimutlabs/rollup-plugin-external
    { name: '@azimutlabs/rollup-plugin-external' },
    // @rollup/plugin-node-resolve
    { name: 'node-resolve' },
    // @rollup/plugin-alias
    { name: 'alias' },
    // @rollup/plugin-babel
    { name: 'babel' },
  ],
}

Installation

All of our packages have rollup as a peer dependency, so you have to install it first:

$ yarn add -D rollup

...then add whatever package you want. The naming always starts with @azimutlabs/rollup. For example, here is the installation script for the babel configuration pack.

$ yarn add -D @azimutlabs/rollup-{config,config-babel}

Packages

The list of our rollup packages. Click the badges to see more information about the curtain package.


	Collect Rollup configurations into a singular array
	Compose, combine, merge and create Rollup configurations

Plugins `@azimutlabs/rollup-plugin-*`


	Control `external` field of Rollup configuration depending on `package.json`

Configurations `@azimutlabs/rollup-config-*`


	Essential features to properly work on a js library package
	Compile code using Babel
	Compile code using TypeScript

Examples

Check the examples directory to see the demo packages created using the configurations we provide.

Usage

We highly suggest that you read specific readmes of packages that you want to use. Here we have some general usage descriptions.

Consider that we are writing a TypeScript + React ui library. We want to have commonjs support to work properly inside a node environment and es6 import/export to support tree-shaking. All those requirements are accomplished by this rollup config:

// rollup.config.js
import { combine, compose, Envs } from '@azimutlabs/rollup-config';
import { babel } from '@azimutlabs/rollup-config-babel';
import { typescript } from '@azimutlabs/rollup-config-typescript';

// Compose multiple configurations into a singular array of 'RollupOptions'.
export default compose(
  // Change the default 'es' format to 'cjs'.
  babel('es', /* { shimMissingExports: true } */),
  // Will only be present in the final config
  // when the 'NODE_ENV' var is set to either 'production' or 'test'.
  [
    combine(
      // Array of configurations.
      [babel, typescript],
      // Internal module format.
      'cjs',
      {
        // Rollup options that will be merged with options provided by configurations.
        shimMissingExports: true,
        // Additional options for internally used plugins.
        pluginBuilders: {
          typescript: {
            // @rollup/plugin-typescript options.
            tslib: require.resolve('tslib.custom'),
          },
        },
      }
    ),
    [Envs.Prod, Envs.Test]
  ],
);

Output will be:

// NODE_ENV === 'production'
// lib/
//   ...
//   index.d.ts - output from typescript
//   index.es.js - output from babel + typescript
//   index.cjs.js - output from babel
export default [
  { /* babel commonjs config */ },
  { /* babel + typescript config */ }
]

Contributing

Any PR is welcomed by our @js-opensource team. Check out our contributing guidelines for more info.

azimutlabs/rollup