Wie kann eine importierte Funktion in ES6 in einer Datei und nicht in einer anderen Datei definiert werden?

Question

Ich benutze Babel/ES6 mit Webpack. Ich importiere die gleiche "Actions" -Datei - die eine Reihe von Funktionen exportiert - an zwei verschiedenen Orten. An einer Stelle gibt es ein Modul, das andere undefined:

actions.js

export function test() { ... } 
export function test2() { ... } 

App.js

import actions from './actions' 
class App extends React.Component { ... } 
console.log(actions);   //<-------- Object{test:function,test2:function) 
export default connect((state) => { ... },actions)(App); 

bearbeiten der Grund App.js gearbeitet war, weil es tatsächlich unter Verwendung import * as actions als unten verstaut, habe ich gerade falsch in dem Beispiel

getapt NestedComponent.js

import actions from './actions' 
class NestedComponent extends OtherComponent { ... } 
console.log(actions);   //<-------- logs undefined 
export default connect((state) => { ... },actions)(NestedComponent); 

Ist dies im Zusammenhang mit der Reihenfolge, in der die Module webpack/Dateien definiert?

Answer 1

Dies sollte in beiden Fällen nicht funktionieren, da Sie die falschen Werte importieren. import foo from '...' importiert den Standard Export des Moduls, aber Sie haben keinen Standard-Export, Sie haben nur Exporte genannt.

Was sollten Sie verwenden, ist

import {test, test2} from './actions'; 
// or 
import * as actions from './actions'; 

Answer 2

Ein weiterer häufiger Fall, in dem dies geschieht, ist, wenn Sie mit Jest testen sind und auto-spöttische Verhalten aktiviert ist. Viel Kummer, solche Gotcha.

Answer 3

Ich stieß auf ein ähnliches Problem, verursacht durch zirkuläre Abhängigkeiten. Versucht, eine Konstante in der Datei 'A' aus der Datei 'B' zu importieren, die wiederum versucht hat, aus der Datei 'A' zu importieren.