ES6, bagaimana Anda dapat mengekspor modul yang diimpor dalam satu baris?

Jawaban:

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

adalah cara ES6 standar, selama Anda tidak perlu Modulejuga tersedia di dalam modul saat mengekspor.

export Module from './Module/Module';

adalah cara ES berikutnya untuk melakukannya, tetapi itu hanya berfungsi jika Anda telah mengaktifkannya di Babel untuk saat ini.

loganfsmyth
sumber
Ini berfungsi dengan baik, namun, tampaknya Webpack tidak menyukai ini, memberikan pemberitahuan bahwa componentsekarang hanya baca dan tidak dapat dimuat ulang secara panas. Sangat aneh!
Dilepaskan
sempurna, ini harus menjadi jawaban yang diterima. (jika webpack hot reload tidak suka, itu masalah di alat itu atau plugin HMR.)
Benja
18
Jika ada yang bertanya-tanya plugin babel mana itu, plugin itu ada di export-extensionssini - babeljs.io/docs/plugins/transform-export-extensions
Noitidart
@loganfsmyth adakah cara untuk mengekspor di atas sebagai default?
lycuid
4
@ abhishek-kdm export { default as default } fromorexport { default } from
loganfsmyth
25

Saya tidak tahu mengapa tetapi hanya ini yang berhasil untuk saya:

komponen / index.js:

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

export {Component, Component2, Component3, Component4};

Saya mengimpor ekspor seperti ini: 

import {Component, Component2, Component3, Component4} from '../components';
Kamuran Sönecek
sumber
23

Harap dicatat Anda juga dapat mengekspor ulang semuanya dari modul:

export * from './Module/Module';
RynoRn
sumber
Sintaks karakter pengganti ini hanya akan berfungsi pada file dengan ekspor bernama. Jika file hanya memiliki satu ekspor default, Anda akan mendapatkan pesan kesalahan "Tidak ada ekspor bernama ditemukan dalam modul".
dmbaughman
12

Untuk komponen React Native, sintaks ini berfungsi untuk saya:

export {default} from 'react-native-swiper';
Cherniv
sumber
Ini berfungsi untuk saya untuk React (bukan Native) ketika saya ingin mengekspor ulang default yang diimpor. Saya menggunakan ini di file index.js yang tidak menerapkan HOC apa pun ke komponen 'murni' saya
Shiraz
-1

Jadi, saya telah menemukan ini berfungsi cukup baik untuk fungsionalitas ekspor langsung yang memiliki index.jsdi root componentsdirektori untuk referensi yang mudah:

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

module.exports = {
  Component,
  ComponentTwo
};

Anda perlu menggunakan module.exports.

Dilepaskan
sumber
3
Perlu diingat bahwa karena ini sebagian merupakan modul CommonJS, ini hanya akan berfungsi secara spesifik di Babel dan akan gagal jika Anda mencoba menggunakannya dalam modul ES6 yang sebenarnya setelah dukungan untuk modul tersebut mendarat di lebih banyak lingkungan, dan kemungkinan akan berhenti berfungsi di versi mendatang dari Babel.
loganfsmyth
Benar. Menggabungkan impor / ekspor JS & es6 umum di Babel 6 putus. Babel5 mengizinkan / memperkuat perilaku salah ini. Dalam contoh Anda, Componenttidak akan lagi menjadi referensi ke komponen yang diekspor, melainkan akan menjadi objek, dengan referensi instance Anda tetap aktifComponent.default
Scott Silvi
Ada yang tahu bagaimana melakukan ini tanpa menggunakan module.exports? Saya suka metode pengemasan sekelompok komponen ini menjadi index.jstetapi tidak dapat memahami sintaksnya. import x from 'x'; import y from 'y'; export default {x, y};kemudian import {x} from xy;tidak berfungsi (dan saya tidak tahu mengapa tidak)
Alex McMillan
2
Alex, apakah kamu mencoba export {x, y}?
jtompl
Jawaban ini bukan es6. Ini adalah platform non-EcamScript. -1
rektide