Das geänderte Standard-Exportverhalten von Babel 6: Ein Wechsel von Bequemlichkeit zu semantischer Konsistenz

In einer bahnbrechenden Änderung hat Babel 6 seinen Ansatz überarbeitet Exportieren von Standardwerten, was einen Wechsel vom früheren, von CommonJS inspirierten Verhalten zu strengen ES6-Prinzipien einleitet. Diese Änderung hat für Entwickler sowohl Chancen als auch Herausforderungen mit sich gebracht.

Zuvor fügte Babel die Zeile „module.exports = exports['default']“ an Standard-Exportdeklarationen an, sodass Entwickler als „require( './foo')" direkt. Mit Babel 6 wurde diese Praxis jedoch eingestellt. Für den Zugriff auf Standardexporte ist nun eine explizite Namenskonvention erforderlich: „require('./foo').default“.

Auswirkungen und Problemumgehungen

Diese Änderung hat das erstellt Notwendigkeit von Codeänderungen in Projekten, die auf dem vorherigen Verhalten beruhten. Während die Übernahme der ES6-Import-/Exportsyntax in vielen Fällen wünschenswert ist, sind für einige ältere Codes möglicherweise alternative Lösungen erforderlich.

Um die alte Funktionalität beizubehalten, ohne dass manuelle Korrekturen erforderlich sind, kann man das „babel-plugin-add-module-“ verwenden. Exporte“-Plugin. Dieses Plugin fügt die Zeile „module.exports = exports['default']“ erneut ein und emuliert den Exportmechanismus vor Babel 6.

Alternativ können Entwickler, die auf das Problem mit benannten Exporten stoßen, die sich in ES6 anders verhalten, dies tun Exportieren Sie explizit nicht standardmäßige Exporte, um Überschreibungen von Modulobjekten zu verhindern.

Beispiel:

Eingabe:

const foo = {}
export default foo

Ausgabe mit Babel 5:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;
module.exports = exports["default"];

Ausgabe mit Babel 6 (und es2015-Plugin):

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;

Fazit

Das geänderte Standardexportverhalten von Babel 6 gewährleistet die Einhaltung der ES6-Semantik, fördert die Konsistenz und vermeidet Verwirrung. Obwohl einige Codeanpassungen erforderlich sind, trägt es letztendlich zur Einführung moderner JavaScript-Standards und -Praktiken bei.