@babel/plugin-transform-modules-commonjs

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

History

Version	Changes
v7.14.0	Implemented the importInterop option

información

Este plugin está incluido en @babel/preset-env bajo la opción modules

Este plugin transforma módulos ECMAScript a CommonJS. Ten en cuenta que solo se transforma la sintaxis de las declaraciones import/export (import "./mod.js") y expresiones de importación (import('./mod.js')), ya que Babel no conoce los diferentes algoritmos de resolución entre implementaciones de módulos ECMAScript y CommonJS.

Ejemplo

Entrada

JavaScript

export default 42;

Salida

JavaScript

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

exports.default = 42;

Instalación

npm

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

Yarn

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

pnpm

pnpm add --save-dev @babel/plugin-transform-modules-commonjs

Bun

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

Uso

Mediante un archivo de configuración (Recomendado)

JavaScript

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

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

Mediante la CLI

Shell

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

Mediante la API de Node

JavaScript

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

Opciones

importInterop

"babel" | "node" | "none", o (specifier: string, requestingFilename: string | undefined) => "babel" | "node" | "none". Valor predeterminado: "babel".

Los módulos CommonJS y ECMAScript no son completamente compatibles. Sin embargo, compiladores, bundlers y entornos de ejecución JavaScript han desarrollado diferentes estrategias para hacerlos trabajar juntos de la mejor manera posible.

Esta opción especifica qué estrategia de interoperabilidad debe usar Babel. Cuando es una función, Babel la llama pasando el especificador de importación y la ruta del importador. Por ejemplo, al compilar un archivo /full/path/to/foo.js que contiene import { a } from 'b', Babel llamará a la función con los parámetros ('b', '/full/path/to/foo.js').

"babel"

Al usar exportaciones con Babel, se exporta una propiedad no enumerable __esModule. Esta propiedad se utiliza luego para determinar si la importación es la exportación predeterminada o si contiene la exportación predeterminada.

JavaScript

import foo from "foo";
import { bar } from "bar";
foo;
bar;

// Is compiled to ...

"use strict";

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

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

_foo.default;
_bar.bar;

Cuando se usa esta interoperabilidad de importación, si tanto el módulo importado como el importador están compilados con Babel, se comportan como si ninguno hubiera sido compilado.

Este es el comportamiento predeterminado.

"node"

Al importar archivos CommonJS (ya sea escritos directamente en CommonJS o generados con un compilador), Node.js siempre vincula la exportación default al valor de module.exports.

JavaScript

import foo from "foo";
import { bar } from "bar";
foo;
bar;

// Is compiled to ...

"use strict";

var _foo = require("foo");
var _bar = require("bar");

_foo;
_bar.bar;

Esto no es exactamente igual a lo que hace Node.js, ya que Babel permite acceder a cualquier propiedad de module.exports como exportación nombrada, mientras que Node.js solo permite importar propiedades estáticamente analizables de module.exports. Sin embargo, cualquier importación que funcione en Node.js también funcionará cuando se compile con Babel usando importInterop: "node".

"none"

Si sabes que el archivo importado ha sido transformado con un compilador que almacena la exportación default en exports.default (como Babel), puedes omitir de forma segura el helper _interopRequireDefault.

JavaScript

import foo from "foo";
import { bar } from "bar";
foo;
bar;

// Is compiled to ...

"use strict";

var _foo = require("foo");
var _bar = require("bar");

_foo.default;
_bar.bar;

loose

boolean, valor predeterminado: false.

Por defecto, al usar exportaciones con Babel se exporta una propiedad no enumerable __esModule.

JavaScript

var foo = (exports.foo = 5);

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

precaución

Considera migrar al supuesto de nivel superior enumerableModuleMeta.

babel.config.json

{
  "assumptions": {
    "enumerableModuleMeta": true
  }
}

En entornos que no admiten esto, puedes habilitar el supuesto enumerableModuleMeta. En lugar de usar Object.defineProperty, se utilizará una asignación directa.

JavaScript

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

strict

boolean, valor predeterminado: false

Por defecto, al usar exportaciones con Babel se exporta una propiedad no enumerable __esModule. En algunos casos, esta propiedad se usa para determinar si la importación es la exportación predeterminada o si contiene la exportación predeterminada.

JavaScript

var foo = (exports.foo = 5);

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

Para evitar que se exporte la propiedad __esModule, puedes establecer la opción strict en true.

lazy

boolean, Array<string>, o (string) => boolean, valor predeterminado: false

Cambia las declaraciones import compiladas por Babel para que se evalúen de forma diferida cuando se usan sus vinculaciones importadas por primera vez.

Esto puede mejorar el tiempo de carga inicial de tu módulo porque evaluar dependencias de inmediato a veces es completamente innecesario. Este es especialmente el caso al implementar un módulo de biblioteca.

El valor de lazy tiene varios efectos posibles:

• false - Sin inicialización diferida para ningún módulo importado.

• true - No inicializar diferidamente las importaciones locales ./foo, pero sí diferir foo de dependencias externas.

  Las rutas locales tienen mayor probabilidad de tener dependencias circulares, que podrían romperse si se cargan diferidamente, por lo que no son diferidas por defecto, mientras que las dependencias entre módulos independientes raramente son cíclicas.

• Array<string> - Inicializar diferidamente todas las importaciones cuya fuente coincida con alguna de las cadenas proporcionadas.

• (string) => boolean - Proporciona una función callback que decidirá si una cadena de fuente dada debe cargarse de manera diferida.

Los dos casos donde las importaciones nunca pueden ser diferidas son:

• import "foo";

  Las importaciones con efectos secundarios son automáticamente no diferidas ya que su mera existencia significa que no hay enlace para iniciar la inicialización posteriormente.

• export * from "foo"

  Reexportar todos los nombres requiere ejecución inmediata porque de otra forma no hay manera de saber qué nombres necesitan ser exportados.

consejo

Puedes leer más sobre cómo configurar opciones de plugins aquí

noInterop

boolean, valor predeterminado: false

precaución

Obsoleto: Utiliza la opción importInterop en su lugar.

Cuando se establece en true, esta opción tiene el mismo comportamiento que configurar importInterop: "none".

assumptions relevantes

• enumerableModuleMeta

• noIncompleteNsImportDetection