Vorher fügte Babel die Zeile hinzu module.exports = exports["default"]
. Das macht es nicht mehr. Was dies bedeutet, ist bevor ich tun konnte:
var foo = require('./foo');
// use foo
Jetzt muss ich das machen:
var foo = require('./foo').default;
// use foo
Keine große Sache (und ich vermute, das hätte es die ganze Zeit sein sollen). Das Problem ist, dass ich viel Code habe, der davon abhängt, wie die Dinge früher funktionierten (ich kann das meiste davon in ES6-Importe konvertieren, aber nicht alles). Kann mir jemand Tipps geben, wie man die alte Art zum Laufen bringt, ohne mein Projekt durchgehen und dies beheben zu müssen (oder sogar eine Anleitung, wie man ein Codemod schreibt, um dies zu tun, wäre ziemlich schlau).
Vielen Dank!
Beispiel:
Eingang:
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;
Beachten Sie, dass der einzige Unterschied in der Ausgabe die ist module.exports = exports["default"]
.
Bearbeiten
Vielleicht interessiert Sie dieser Blogpost, den ich geschrieben habe, nachdem ich mein spezielles Problem gelöst habe: Missverständnis von ES6-Modulen, Aktualisieren von Babel, Tränen und eine Lösung
quelle
require
Sie arbeiten müssen, wenn Sie in einer Codebasis arbeiten, die Babel verwendet? Möglicherweise gibt es andere Ansätze, mit denen Sie dies ohnehin vermeiden können.if (false) { require('./foo') }
B .: Mit Webpack wird das tatsächliche Einfügenfoo.js
in das resultierende Bundle übersprungen .false
Umschalter dort? Wenn es sich um eine Bedingung handelt, die in Ihrer Webpack-Konfiguration verfügbar ist, gibt es möglicherweise eine andere Option.export default {foo, bar}
durch ersetztmodule.exports = {foo, bar}
. Mir hat die falsche Methode sehr gut gefallen , die jetzt nicht unterstützt wird.Antworten:
Sie können dieses Plugin auch verwenden , um das alte
export
Verhalten wiederherzustellen.quelle
Wenn Sie das CommonJS-Exportverhalten wünschen, müssen Sie CommonJS direkt verwenden (oder das Plugin in der anderen Antwort verwenden). Dieses Verhalten wurde entfernt, weil es Verwirrung stiftete und zu einer ungültigen ES6-Semantik führte, auf die sich einige Leute verlassen hatten, z
und dann
Dies ist ungültiges ES6, funktionierte jedoch aufgrund des von Ihnen beschriebenen CommonJS-Interoperabilitätsverhaltens. Leider ist es nicht möglich, beide Fälle zu unterstützen, und es ist schlimmer, wenn Benutzer ungültiges ES6 schreiben können, als wenn Sie dies tun
.default
.Das andere Problem war, dass es für Benutzer unerwartet war, wenn sie beispielsweise in Zukunft einen benannten Export hinzufügten
dann
aber
dann
quelle
export default function () {}
in Modul A und dannimport a from 'a'
in Modul B mache ,a
wäre Babel 6{ default: function () {} }
... Soweit ich aus exploringjs.com/es6/… verstehen kann , sollte dies funktionieren und ich sollte das exportieren Funktion in B, nicht das Objekt.Für Bibliotheksautoren können Sie dieses Problem möglicherweise umgehen.
Normalerweise habe ich einen Einstiegspunkt, dh
index.js
die Datei, auf die ich aus dem Hauptfeld in zeigepackage.json
. Es wird nichts anderes getan, als den tatsächlichen Einstiegspunkt der Bibliothek erneut zu exportieren:Um das Babel-Problem zu umgehen, habe ich dies in eine
import
Anweisung geändert und dann die Standardeinstellung zugewiesenmodule.exports
:Alle meine anderen Dateien bleiben als reine ES6-Module ohne Problemumgehungen. Also muss nur der Einstiegspunkt leicht geändert werden :)
Dies funktioniert sowohl für CommonJs als auch für ES6-Importe, da Babel das Reverse Interop (commonjs -> es6) anscheinend nicht gelöscht hat. Babel injiziert die folgende Funktion, um Commonjs zu reparieren:
Ich habe Stunden damit verbracht, dagegen anzukämpfen, also hoffe ich, dass dies jemand anderem die Mühe erspart!
quelle
module.exports
und soexport default
. Jetzt sind wir wieder auf dem ersten Platz?require("whatever").default
. Wenn Sie kein Bibliotheksautor sind, ist dies wahrscheinlich irrelevantIch hatte solche Probleme. Und das ist meine Lösung:
//src/arithmetic.js
//src/main.js
quelle