ES6, w jaki sposób można wyeksportować zaimportowany moduł w jednej linii?

107

Chciałbym wykonać następujące czynności, ale z pojedynczym wierszem, jeśli to możliwe:

  • import Module from './Module/Module;'
  • export Module;

Próbowałem wykonać następujące czynności, ale wydaje się, że nie działa:

  • export Module from './Module/Module;
Odstraszony
źródło

Odpowiedzi:

195
export {default as Module} from './Module/Module';

jest standardowym sposobem ES6, o ile nie musisz Modulebyć również dostępny w module wykonującym eksport.

export Module from './Module/Module';

jest proponowanym sposobem ESnext na zrobienie tego, ale działa tylko wtedy, gdy włączyłeś go na razie w Babel.

loganfsmyth
źródło
Działa świetnie, jednak wydaje się, że Webpack tego nie lubi, dając powiadomienie, że componentjest teraz tylko do odczytu i nie można go ponownie załadować na gorąco. Bardzo dziwny!
Detuned
Idealnie, to powinna być akceptowana odpowiedź. (jeśli ponowne ładowanie pakietu webpack nie podoba, to problem z tym narzędziem lub wtyczką HMR.)
Benja
18
Jeśli ktoś zastanawia się, która Babel wtyczki to jest, to jest export-extensionstutaj - babeljs.io/docs/plugins/transform-export-extensions
Noitidart
@loganfsmyth czy istnieje sposób na wyeksportowanie powyższego jako domyślnego?
lycuid
4
@ abhishek-kdm export { default as default } fromlubexport { default } from
loganfsmyth
25

Nie wiem dlaczego, ale to działa dla mnie:

komponenty / index.js:

import Component from './Component';
import Component2 from './Component2';
import Component3 from './Component3';
import Component4 from './Component4';

export {Component, Component2, Component3, Component4};

Importuję eksport w ten sposób:

import {Component, Component2, Component3, Component4} from '../components';
Kamuran Sönecek
źródło
23

Pamiętaj, że możesz również ponownie wyeksportować wszystko z modułu:

export * from './Module/Module';
RynoRn
źródło
Ta składnia symboli wieloznacznych będzie działać tylko w przypadku plików z nazwanymi eksportami. Jeśli plik ma tylko jeden domyślny eksport, pojawi się błąd „Nie znaleziono nazwanych eksportów w module”.
dmbaughman
12

W przypadku komponentów React Native ta składnia działa dla mnie:

export {default} from 'react-native-swiper';
Czerniow
źródło
Działa to w przypadku React (nie Native), gdy chcę ponownie wyeksportować zaimportowane domyślne. Używam tego w plikach index.js, które nie stosują żadnych HOC do moich `` czystych '' komponentów
Shiraz
-1

Tak więc stwierdziłem, że działa to całkiem dobrze w przypadku funkcji natychmiastowego eksportu polegającej na posiadaniu index.jsw katalogu głównym componentskatalogu w celu łatwego odniesienia:

import Component from './Component/Component'
import ComponentTwo from './ComponentTwo/ComponentTwo'

module.exports = {
  Component,
  ComponentTwo
};

Musisz użyć module.exports.

Odstraszony
źródło
3
Należy pamiętać, że ponieważ są to częściowo moduły CommonJS, będzie to działać tylko w Babel i zakończy się niepowodzeniem, jeśli spróbujesz użyć go w prawdziwym module ES6, gdy wsparcie dla nich znajdzie się w większej liczbie środowisk i prawdopodobnie przestanie działać w przyszłych wersjach Babel.
loganfsmyth
Poprawny. Łączenie wspólnego importu / eksportu JS i es6 w Babel 6 przerw. Babel5 dopuścił / wzmocnił to nieprawidłowe zachowanie. W twoim przykładzie Componentnie będzie już odniesieniem do wyeksportowanego komponentu, ale będzie obiektem, z odwołaniem do instancjiComponent.default
Scott Silvi,
Czy ktoś wie, jak to zrobić bez używania module.exports? Podoba mi się ta metoda pakowania kilku komponentów w plik, index.jsale nie mogę zrozumieć składni. import x from 'x'; import y from 'y'; export default {x, y};to import {x} from xy;nie działa (i nie wiem dlaczego nie)
Alex McMillan
2
Alex, próbowałeś export {x, y} zamiast tego ?
jtompl
Ta odpowiedź to nie es6. To platforma inna niż EcamScript. -1
powtórz