ES6 eksport / import w pliku indeksu


201

Obecnie używam ES6 w aplikacji React przez webpack / babel. Korzystam z plików indeksu, aby zebrać wszystkie komponenty modułu i wyeksportować je. Niestety wygląda to tak:

import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';

export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;

Więc mogę ładnie zaimportować go z innych miejsc takich jak ten:

import { Comp1, Comp2, Comp3 } from './components';

Oczywiście nie jest to bardzo miłe rozwiązanie, więc zastanawiałem się, czy jest jakiś inny sposób. Wydaje się, że nie jestem w stanie wyeksportować importowanego komponentu bezpośrednio.


Odpowiedzi:


369

Możesz łatwo ponownie wyeksportować domyślny import:

export {default as Comp1} from './Comp1.jsx';
export {default as Comp2} from './Comp2.jsx';
export {default as Comp3} from './Comp3.jsx';

Istnieje również propozycja dla ES7 ES8 , która pozwoli Ci pisać export Comp1 from '…';.


2
Zobacz także podobne wzory tutaj i tutaj
Bergi

6
Oprócz propozycji ES8 możesz używać generowania kodu do obsługi plików indeksu. Zajrzyj na github.com/gajus/create-index i github.com/ryardley/indexr .
Gajus,

@Bergi Więc te 3 linie wykonują zarówno import, jak i eksport? Czy to tylko eksportowanie, ale nie musisz już majstrować przy nazwie Comp1_ itp.?
musicformellons

@musicformellons Eksportują bezpośrednio z odnośnego modułu, tak.
Bergi

2
@amann Odniesienie do siebie samych nie jest złe, ale może prowadzić do problemów w zależności od tego, co robi moduł. Niezależnie od tego, uważam, że powinieneś używać tego wzorca tylko w pliku indeksu biblioteki, aby eksportować wszystkie komponenty, a jeśli masz zależności między modułami, powinieneś importować je bezpośrednio zamiast importować część z dużej. Dzięki temu ten wzorzec nie wprowadza odniesień cyklicznych.
Bergi

56

Pamiętaj też, że jeśli musisz wyeksportować wiele funkcji jednocześnie, takich jak akcje, których możesz użyć

export * from './XThingActions';

14
Tak. Niestety, wymaga to tylko eksportu nazwanego, tzn. Nie obejmuje domyślnego eksportu.
ArneHugo,

daj mi (dość mylące ... zajęło mi chwilę) SyntaxError: Unexpected reserved word, zaakceptowana odpowiedź @ Bergi działa.
Frank Nocke,

Możesz także nazwać domyślny eksport, aby obejść ten problem. Twoje działania nie powinny tak naprawdę mieć domyślnego eksportu, więc to rozwiązanie działa dobrze.
Barry Michael Doyle

2
najlepszą praktyką jest nieużywanie domyślnego eksportu w javascript, niepotrzebnej dodatkowej składni. @GM ma najlepszą odpowiedź na ten wątek dla nowoczesnego javascript.
mibbit

39

Za późno, ale chcę opisać sposób rozwiązania tego problemu.

Posiadanie modelpliku o dwóch nazwanych eksportach:

export { Schema, Model };

i posiadający controllerplik, który ma domyślny eksport:

export default Controller;

Udostępniłem w indexpliku w ten sposób:

import { Schema, Model } from './model';
import Controller from './controller';

export { Schema, Model, Controller };

i zakładając, że chcę je wszystkie zaimportować:

import { Schema, Model, Controller } from '../../path/';

Czy to działa, gdy importujesz funkcję, a następnie eksportujesz ją z powrotem? Próbowałem, ale nie zrobiłem tego.
Aftab Naveed

Przepraszam, że tak naprawdę działało, brakowało mi / na mojej ścieżce.
Aftab Naveed

14

Po prostu:

// Default export (recommended)
export {default} from './MyClass' 

// Default export with alias
export {default as d1} from './MyClass' 

// In >ES7, it could be
export * from './MyClass'

// In >ES7, with alias
export * as d1 from './MyClass'

Lub według nazw funkcji:

// export by function names
export { funcName1, funcName2, …} from './MyClass'

// export by aliases
export { funcName1 as f1, funcName2 as f2, …} from './MyClass'

Więcej informacji: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.