rollup-plugin-commonjs
Advanced tools
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.
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'
]
})
]
};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.
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 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.
Convert CommonJS modules to ES6, so they can be included in a Rollup bundle
npm install --save-dev rollup-plugin-commonjs
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' ]
})
]
};
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.
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' ]
}
})
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.
MIT
FAQs
Convert CommonJS modules to ES2015
We found that rollup-plugin-commonjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.