rollup-plugin-commonjs

What is rollup-plugin-commonjs?

The rollup-plugin-commonjs package is a Rollup plugin that allows you to convert CommonJS modules to ES6, so they can be included in a Rollup bundle. This is particularly useful for including npm packages that are only available in CommonJS format.

What are rollup-plugin-commonjs's main functionalities?

Convert CommonJS to ES6

This feature allows you to convert CommonJS modules to ES6 modules. The code sample demonstrates how to use the rollup-plugin-commonjs in a Rollup configuration file to convert CommonJS modules in the input file 'src/main.js' to ES6 modules in the output file 'bundle.js'.

const commonjs = require('@rollup/plugin-commonjs');

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [commonjs()]
};

Named Exports

This feature allows you to specify named exports for CommonJS modules that do not have them. The code sample shows how to configure named exports for a module located at 'node_modules/my-library/index.js'.

const commonjs = require('@rollup/plugin-commonjs');

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [
    commonjs({
      namedExports: {
        'node_modules/my-library/index.js': ['namedExport1', 'namedExport2']
      }
    })
  ]
};

Dynamic Requires

This feature allows you to handle dynamic requires in CommonJS modules. The code sample demonstrates how to configure the plugin to handle dynamic requires for all JavaScript files in the 'node_modules/my-library/' directory.

const commonjs = require('@rollup/plugin-commonjs');

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [
    commonjs({
      dynamicRequireTargets: [
        'node_modules/my-library/**/*.js'
      ]
    })
  ]
};

Other packages similar to rollup-plugin-commonjs

@rollup/plugin-node-resolve

The @rollup/plugin-node-resolve package is a Rollup plugin that allows you to use the Node.js resolution algorithm to locate modules using the 'node_modules' directory. It is often used in conjunction with rollup-plugin-commonjs to bundle npm packages that use CommonJS modules. While rollup-plugin-commonjs converts CommonJS modules to ES6, @rollup/plugin-node-resolve helps in locating and resolving the modules.

babel-plugin-transform-commonjs

The babel-plugin-transform-commonjs package is a Babel plugin that transforms CommonJS modules into ES6 modules. It is similar to rollup-plugin-commonjs in that it converts CommonJS modules to ES6, but it is used within the Babel ecosystem rather than Rollup. This makes it a good choice if you are already using Babel for other transformations.

webpack

Webpack is a module bundler that supports both CommonJS and ES6 modules out of the box. It can be used as an alternative to Rollup for bundling JavaScript applications. While rollup-plugin-commonjs is specifically designed to work with Rollup, Webpack provides a more comprehensive solution for module bundling, including support for both CommonJS and ES6 modules without the need for additional plugins.

README

rollup-plugin-commonjs

Convert CommonJS modules to ES6, so they can be included in a Rollup bundle

Installation

npm install --save-dev rollup-plugin-commonjs

Usage

Typically, you would use this plugin alongside rollup-plugin-node-resolve, so that you could bundle your CommonJS dependencies in node_modules.

// rollup.config.js
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';

export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  },
  plugins: [
    nodeResolve({
      jsnext: true,
      main: true
    }),

    commonjs({
      // non-CommonJS modules will be ignored, but you can also
      // specifically include/exclude files
      include: 'node_modules/**',  // Default: undefined
      exclude: [ 'node_modules/foo/**', 'node_modules/bar/**' ],  // Default: undefined
      // these values can also be regular expressions
      // include: /node_modules/

      // search for files other than .js files (must already
      // be transpiled by a previous plugin!)
      extensions: [ '.js', '.coffee' ],  // Default: [ '.js' ]

      // if true then uses of `global` won't be dealt with by this plugin
      ignoreGlobal: false,  // Default: false

      // if false then skip sourceMap generation for CommonJS modules
      sourceMap: false,  // Default: true

      // explicitly specify unresolvable named exports
      // (see below for more details)
      namedExports: { 'react': ['createElement', 'Component' ] },  // Default: undefined

      // sometimes you have to leave require statements
      // unconverted. Pass an array containing the IDs
      // or a `id => boolean` function. Only use this
      // option if you know what you're doing!
      ignore: [ 'conditional-runtime-dependency' ]
    })
  ]
};

Usage with symlinks

Symlinks are common in monorepos and are also created by the npm link command. Rollup with rollup-plugin-node-resolve resolves modules to their real paths by default. So include and exclude paths should handle real paths rather than symlinked paths (e.g. ../common/node_modules/** instead of node_modules/**). You may also use a regular expression for include that works regardless of base path. Try this:

commonjs({
  include: /node_modules/
})

Whether symlinked module paths are realpathed or preserved depends on Rollup's preserveSymlinks setting, which is false by default, matching Node.js' default behavior. Setting preserveSymlinks to true in your Rollup config will cause import and export to match based on symlinked paths instead.

Custom named exports

This plugin will attempt to create named exports, where appropriate, so you can do this...

// importer.js
import { named } from './exporter.js';

// exporter.js
module.exports = { named: 42 }; // or `exports.named = 42;`

...but that's not always possible:

// importer.js
import { named } from 'my-lib';

// my-lib.js
var myLib = exports;
myLib.named = 'you can\'t see me';

In those cases, you can specify custom named exports:

commonjs({
  namedExports: {
    // left-hand side can be an absolute path, a path
    // relative to the current directory, or the name
    // of a module in node_modules
    'my-lib': [ 'named' ]
  }
})

Strict mode

ES modules are always parsed in strict mode. That means that certain non-strict constructs (like octal literals) will be treated as syntax errors when Rollup parses modules that use them. Some older CommonJS modules depend on those constructs, and if you depend on them your bundle will blow up. There's basically nothing we can do about that.

Luckily, there is absolutely no good reason not to use strict mode for everything — so the solution to this problem is to lobby the authors of those modules to update them.

License

MIT

Changelog

10.1.0

2019-08-27

• Normalize ids before looking up in named export map (#406)
• Update README.md with note on symlinks (#405)