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.
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
.
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({
include: 'node_modules/**',
exclude: [ 'node_modules/foo/**', 'node_modules/bar/**' ],
extensions: [ '.js', '.coffee' ],
ignoreGlobal: false,
sourceMap: false,
namedExports: { './module.js': ['foo', 'bar' ] },
ignore: [ 'conditional-runtime-dependency' ]
})
]
};
Usage in monorepo
In case you are using a monorepo, you may want to use a regular expression for include
as the string 'node_modules' will not match if your node_modules
is not in your current working directory (i.e. '../node_modules'). Try this:
commonjs({
include: /node_modules/
})
Custom named exports
This plugin will attempt to create named exports, where appropriate, so you can do this...
import { named } from './exporter.js';
module.exports = { named: 42 };
...but that's not always possible:
import { named } from 'my-lib';
var myLib = exports;
myLib.named = 'you can\'t see me';
In those cases, you can specify custom named exports:
commonjs({
namedExports: {
'node_modules/my-lib/index.js': [ '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