2015-12-14 22 views
5

Reagieren mit babel. Ich habe diese Verwirrung mit Importen und module.exports. Ich gehe davon aus, dass babel beim Konvertieren des ES6-Codes in ES5 die importierten und exportierenden Dateien in modules.exports umwandelt.Module.exports und es6 Import

Wenn ich eine Funktion von einem Modul exportieren und die Funktion in ein anderes Modul importieren, wird der Code ordnungsgemäß ausgeführt. Aber wenn ich die Funktion mit module.exports exportiere und mit "import" importiere, wird der Fehler zur Laufzeit angezeigt und sagt, dass es keine Funktion ist.

Ich kochte ein Beispiel.

Ich benutzte Babel mit Preset es2015, um es zu kompilieren. Das gibt mir die folgenden Fehler

Uncaught TypeError: (0 , _animals.Tiger) is not a function

Aber wenn ich die module.exports = Tiger; entfernen und ersetzt sie durch export { Tiger }; Es funktioniert gut.

Was fehlt mir hier ??

EDIT: Ich verwende browserify als Modul Bundler.

+0

Haben Sie sich den Babel-Ausgang angeschaut? Ein Blick auf die transpilierte Quelle von Tiger.js wird Ihnen sofort sagen, warum es nicht funktioniert. Lange Rede, kurzer Sinn: Bleiben Sie bei einem Modul-System oder verwenden Sie einen Modul-Bundler wie ein Webpack, der für Inkonsistenzen sorgt. – GJK

+0

Sorry zu erwähnen, ich benutze browserify als Modul Bundler – Nani

Antwort

2

export { Tiger } entspricht module.exports.Tiger = Tiger. Umgekehrt wäre module.exports = Tiger äquivalent zu export default Tiger. Wenn Sie module.exports = Tiger verwenden und dann versuchen Sie import { Tiger } from './animals', fragen Sie effektiv nach Tiger.Tiger.

+0

Also was wäre die richtige Import-Anweisung hier sein? wäre es nur "importiere Tiger aus"/"Tiere"? –

+0

Ich glaube ja, vorausgesetzt, Sie wollten nicht tiger.js ändern –