@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.

Example

In

export default 42;

Out

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = 42;

Installation

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

Usage

Via .babelrc (Recommended)

.babelrc

// without options
{
  "plugins": ["@babel/transform-modules-commonjs"]
}

// with options
{
  "plugins": [
    ["@babel/transform-modules-commonjs", {
      "allowTopLevelThis": true
    }]
  ]
}

Via CLI

babel --plugins @babel/transform-modules-commonjs script.js

Via Node API

require("@babel/core").transform("code", {
  plugins: ["@babel/transform-modules-commonjs"]
});

Options

loose

boolean, defaults to false.

As per the spec, import and export are only allowed to be used at the top level. When in loose mode these are allowed to be used anywhere.

And by default, when using exports with babel a non-enumerable __esModule property is exported.

var foo = exports.foo = 5;

Object.defineProperty(exports, "__esModule", {
  value: true
});

In environments that don't support this you can enable loose mode on babel-plugin-transform-modules-commonjs and instead of using Object.defineProperty an assignment will be used instead.

var foo = exports.foo = 5;
exports.__esModule = true;

strict

boolean, defaults to false

By default, when using exports with babel a non-enumerable __esModule property is exported. In some cases this property is used to determine if the import is the default export or if it contains the default export.

var foo = exports.foo = 5;

Object.defineProperty(exports, "__esModule", {
  value: true
});

In order to prevent the __esModule property from being exported, you can set the strict option to true.

noInterop

boolean, defaults to false

By default, when using exports with babel a non-enumerable __esModule property is exported. This property is then used to determine if the import is the default export or if it contains the default export.

"use strict";

var _foo = _interopRequireDefault(require("foo"));

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

In cases where the auto-unwrapping of default is not needed, you can set the noInterop option to true to avoid the usage of the interopRequireDefault helper (shown in inline form above).