NPM rollup Package

Rollup.js

Usage

The simplest way to use Rollup is with the rollup command-line interface (CLI). To install the CLI globally, run:

npm install -g rollup

Once installed, you can use the rollup command to bundle your code. For example, to bundle a file called main.js, run:

rollup main.js -o bundle.js

This will create a new file called bundle.js that contains the bundled code.

You can also use Rollup programmatically. To do this, install the Rollup package from npm:

npm install --save-dev rollup

Once installed, you can use the Rollup API to create a bundle. For example, the following code creates a bundle and writes it to a file:

import rollup from "rollup";

const bundle = await rollup.rollup({
  input: "main.js",
  output: {
    file: "bundle.js",
    format: "iife",
  },
});

await bundle.write();

Configuration

Rollup can be configured using a configuration file. The configuration file is a JavaScript module that exports a rollup object. The rollup object can contain the following properties:

  • input: The entry point for the bundle.
  • output: The output file for the bundle.
  • plugins: An array of plugins to use.
  • external: An array of external modules to exclude from the bundle.
  • watch: Whether to watch for changes to the input files and rebuild the bundle automatically.

For example, the following configuration file tells Rollup to bundle the main.js file and output the bundled code to the bundle.js file:

export default {
  input: "main.js",
  output: {
    file: "bundle.js",
    format: "iife",
  },
};

You can also use the rollup.config.js file to configure Rollup. For example, the following rollup.config.js file tells Rollup to bundle the main.js file and output the bundled code to the bundle.js file:

export default {
  input: "main.js",
  output: {
    file: "bundle.js",
    format: "iife",
  },
};

Plugins

Rollup plugins are used to extend the functionality of Rollup. Plugins can be used to do things like:

  • Transform the code in the bundle.
  • Add new features to the bundle.
  • Optimize the bundle.

There are many different Rollup plugins available. You can find a list of plugins on the Rollup website.

To use a plugin, you need to install it from npm and then add it to the plugins array in your Rollup configuration file. For example, to use the babel plugin, you would install it from npm and then add it to your Rollup configuration file like this:

import babel from "rollup-plugin-babel";

export default {
  input: "main.js",
  output: {
    file: "bundle.js",
    format: "iife",
  },
  plugins: [
    babel(),
  ],
};

Best Practices

Here are some best practices for using Rollup:

  • Use a configuration file. A configuration file makes it easier to manage your Rollup configuration.
  • Use plugins. Plugins can extend the functionality of Rollup and help you build more complex bundles.
  • Optimize your bundle. There are a number of ways to optimize your bundle, such as using the uglify plugin.
  • Test your bundle. It’s important to test your bundle to make sure it works as expected.

Conclusion

Rollup is a powerful tool for bundling JavaScript code. It’s easy to use and can be customized to meet your specific needs. By following the best practices outlined in this guide, you can build efficient and reliable bundles.