broccoli-rollup

What is broccoli-rollup?

broccoli-rollup is a Broccoli plugin that allows you to use Rollup to bundle your JavaScript files. It integrates the Rollup module bundler into the Broccoli build pipeline, enabling you to take advantage of Rollup's features such as tree-shaking, code-splitting, and plugin support within a Broccoli-based build system.

What are broccoli-rollup's main functionalities?

Basic Usage

This example demonstrates the basic usage of broccoli-rollup. It sets up a Rollup build that takes an input file 'src/main.js' and outputs a bundled file 'bundle.js' in CommonJS format. It also includes plugins for resolving node modules and converting CommonJS modules to ES6.

const Rollup = require('broccoli-rollup');
const nodeResolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');

const tree = new Rollup('src', {
  rollup: {
    input: 'src/main.js',
    output: {
      file: 'bundle.js',
      format: 'cjs'
    },
    plugins: [
      nodeResolve(),
      commonjs()
    ]
  }
});

module.exports = tree;

Tree-shaking

This example shows how to enable tree-shaking with broccoli-rollup. Tree-shaking is a feature that eliminates dead code from the final bundle, making it smaller and more efficient. The 'treeshake' option is set to true in the Rollup configuration.

const Rollup = require('broccoli-rollup');

const tree = new Rollup('src', {
  rollup: {
    input: 'src/main.js',
    output: {
      file: 'bundle.js',
      format: 'es'
    },
    treeshake: true
  }
});

module.exports = tree;

Code-splitting

This example demonstrates how to use code-splitting with broccoli-rollup. Code-splitting allows you to split your code into multiple bundles, which can be loaded on demand. The 'experimentalCodeSplitting' option is enabled in the Rollup configuration.

const Rollup = require('broccoli-rollup');

const tree = new Rollup('src', {
  rollup: {
    input: 'src/main.js',
    output: [
      {
        dir: 'dist',
        format: 'es'
      }
    ],
    experimentalCodeSplitting: true
  }
});

module.exports = tree;

Other packages similar to broccoli-rollup

rollup

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. While broccoli-rollup integrates Rollup into the Broccoli build system, Rollup itself can be used standalone or with other build systems.

webpack

Webpack is a popular module bundler that can handle not only JavaScript but also assets like CSS, images, and fonts. It offers a rich plugin ecosystem and advanced features like hot module replacement. Compared to broccoli-rollup, Webpack is more feature-rich and versatile but can be more complex to configure.

parcel

Parcel is a web application bundler that offers a zero-configuration setup. It automatically handles common tasks like code-splitting, hot module replacement, and asset bundling. Parcel is easier to set up compared to broccoli-rollup but may not offer the same level of customization.

README

Usage

Broccoli-rollup is a simple wrapper around Rollup. In the options object pass the rollup options.

basic

var Rollup = require('broccoli-rollup');
var lib = 'lib';

module.exports = new Rollup(lib, {
  rollup: {
    entry: 'lib/index.js',
    dest: 'my-lib.js'
  }
})

\w targets

var Rollup = require('broccoli-rollup');
var lib = 'lib';

module.exports = new Rollup(lib, {
  rollup: {
    entry: 'lib/index.js',
    targets: [
      {
        dest: 'my-lib.amd.js'
        format: 'amd',
      },
      {
        dest: 'my-lib.iife.js'
        format: 'iife',
      }
    ]
  }
})