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.


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';

23

Harap dicatat Anda juga dapat mengekspor ulang semuanya dari modul:

export * from './Module/Module';

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';

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.


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
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.