@babel/plugin-transform-modules-commonjs

What is @babel/plugin-transform-modules-commonjs?

The @babel/plugin-transform-modules-commonjs npm package is a Babel plugin that transforms ECMAScript modules to CommonJS modules. This is useful for enabling code written using ES6 module syntax to run in environments that only support CommonJS modules, such as older versions of Node.js or browsers without ES6 module support.

What are @babel/plugin-transform-modules-commonjs's main functionalities?

Transform ES6 import statements to CommonJS require

Converts ES6 import statements into CommonJS require calls.

import { square } from './math';
console.log(square(5));
// Transformed code:
var _math = require('./math');
console.log(_math.square(5));

Transform ES6 export statements to CommonJS exports

Converts ES6 named and default export statements into CommonJS module.exports assignments.

export const square = (n) => n * n;
export default square;
// Transformed code:
const square = (n) => n * n;
exports.square = square;
exports.default = square;

Interoperability with Babel's module interop helpers

Ensures compatibility with Babel's interopRequireDefault helper to handle default exports when importing modules.

import square from './math';
console.log(square(5));
// Transformed code with interopRequireDefault helper:
var _math = _interopRequireDefault(require('./math'));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
console.log(_math.default(5));

Other packages similar to @babel/plugin-transform-modules-commonjs

esm

The 'esm' package is a lightweight runtime that allows you to load ES modules in Node.js. It differs from @babel/plugin-transform-modules-commonjs in that it doesn't require a build step and can directly execute ES modules in Node.js.

@rollup/plugin-commonjs

The '@rollup/plugin-commonjs' package is a plugin for Rollup that converts CommonJS modules into ES6 modules that Rollup can then bundle. It serves a similar purpose but is specific to the Rollup bundler, whereas @babel/plugin-transform-modules-commonjs is more general-purpose and can be used with various build tools that support Babel.

babel-plugin-transform-es2015-modules-commonjs

The 'babel-plugin-transform-es2015-modules-commonjs' package is an older Babel plugin that also transforms ES6 modules to CommonJS. It has been superseded by @babel/plugin-transform-modules-commonjs, which is part of the Babel 7 release.

README

@babel/plugin-transform-modules-commonjs

This plugin transforms ES2015 modules to CommonJS

See our website @babel/plugin-transform-modules-commonjs for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-transform-modules-commonjs

or using yarn:

yarn add @babel/plugin-transform-modules-commonjs --dev

Changelog

v7.18.0 (2022-05-19)

:rocket: New Feature

• babel-preset-env
  • #14556 feat: add import-assertions to shippedProposals (@JLHwung)
• babel-helper-create-class-features-plugin, babel-helper-define-map, babel-plugin-proposal-class-static-block, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-object-rest-spread, babel-plugin-syntax-destructuring-private, babel-plugin-transform-destructuring, babel-plugin-transform-proto-to-assign, babel-plugin-transform-typescript, babel-standalone, babel-traverse, babel-types
  • #14304 Transform destructuring private (@JLHwung)
• babel-generator, babel-parser, babel-types
  • #14359 [ts 4.7] Support optional variance annotations (@magic-akari)
• babel-generator, babel-parser
  • #14476 [ts 4.7] Support extends constraints for infer (@sosukesuzuki)
• babel-generator, babel-parser, babel-plugin-transform-typescript, babel-traverse, babel-types
  • #14457 [ts] Add support for instantiation expressions (@nicolo-ribaudo)
• babel-helper-module-transforms, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-umd
  • #14456 Pass filename to importInterop method (@NickHeiner)

:bug: Bug Fix

• babel-types
  • #14551 Do not create multiple copies of comments when cloning nodes (@liuxingbaoyu)
• babel-parser
  • #14557 Fix parsing of < after object literals with the jsx plugin (@JLHwung)
• babel-plugin-transform-react-pure-annotations
  • #14528 fix: do not mark computed React[...] methods as pure (@JLHwung)

:nail_care: Polish

• babel-core, babel-helper-transform-fixture-test-runner, babel-helpers, babel-plugin-proposal-async-generator-functions, babel-plugin-transform-async-to-generator, babel-plugin-transform-block-scoping, babel-plugin-transform-classes, babel-plugin-transform-regenerator, babel-plugin-transform-runtime, babel-preset-env, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime, babel-standalone
  • #14538 Inline regeneratorRuntime as a normal helper (@nicolo-ribaudo)

:house: Internal

• babel-core, babel-helper-create-class-features-plugin, babel-plugin-proposal-decorators, babel-plugin-transform-modules-systemjs
  • #14530 improve helper-create-class-features typings (@JLHwung)