ES6, içe aktarılan bir modülü tek bir satıra nasıl aktarabilirsiniz?


Yanıtlar:


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

Dışa aktarımı Moduleyapan modülün içinde de bulunmanıza gerek olmadığı sürece standart ES6 yöntemidir .

export Module from './Module/Module';

bunu yapmanın önerilen bir ESnext yoludur, ancak bu yalnızca şimdilik Babel'de etkinleştirdiyseniz işe yarar.


Harika çalıştı, ancak Webpack bundan hoşlanmıyor gibi görünüyor component, artık salt okunur ve çalışırken yeniden yüklenemiyor. Çok ilginç!
O Filtrelenmiş

mükemmel, bu kabul edilen cevap olmalı. (eğer web paketi çalışırken yeniden yükleme, bu araçta bir problemden hoşlanmıyorsa veya HMR eklentisidir.)
Benja

18
Öyle eklentisi kimse hangi Babel merak edilirse, o export-extensionsburada - babeljs.io/docs/plugins/transform-export-extensions
Noitidart

@loganfsmyth yukarıdakileri varsayılan olarak dışa aktarmanın bir yolu var mı?
lycuid

4
@ abhishek-kdm export { default as default } fromveyaexport { default } from
loganfsmyth

25

Neden bilmiyorum ama bu benim için çalışıyor:

bileşenler / index.js:

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

export {Component, Component2, Component3, Component4};

İhracatları şu şekilde ithal ediyorum:

import {Component, Component2, Component3, Component4} from '../components';

23

Lütfen bir modüldeki her şeyi yeniden dışa aktarabileceğinizi unutmayın:

export * from './Module/Module';

Bu joker karakter sözdizimi yalnızca adlandırılmış dışa aktarmalara sahip dosyalarda çalışır. Dosyanın yalnızca tek bir varsayılan dışa aktarması varsa, "Modülde adlandırılmış dışa aktarma bulunamadı" hatasını alırsınız.
dmbaughman

12

React Native bileşenleri için bu sözdizimi benim için çalışıyor:

export {default} from 'react-native-swiper';

Bu, içe aktarılan bir varsayılanı yeniden dışa aktarmak istediğimde React (Yerel değil) için işe yarar. Bunu, 'saf' bileşenlerime herhangi bir HOC uygulamayan index.js dosyalarında kullanıyorum
Shiraz

-1

Bu nedenle, bunun , kolay başvuru index.jsiçin componentsdizinin kökünde bir yer almanın anında dışa aktarma işlevi için oldukça iyi çalıştığını buldum :

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

module.exports = {
  Component,
  ComponentTwo
};

Kullanmanız gerekiyor module.exports.


3
Bu kısmen CommonJS modülleri olduğundan, bunun yalnızca Babel'de çalışacağını ve gerçek bir ES6 modülünde kullanmaya çalışırsanız başarısız olacağını, onlar için destek daha fazla ortama ulaştığında başarısız olacağını ve muhtemelen gelecekteki sürümlerinde çalışmayı bırakacağını unutmayın. Babil.
loganfsmyth

Doğru. Ortak JS ve es6 içe / dışa aktarımını Babel 6'da birbirine karıştırıyor. Babel5 bu yanlış davranışa izin verdi / pekiştirdi. Örneğinizde, Componentartık dışa aktarılan bileşeninize bir referans olmayacak, bunun yerine örnek referansınızın devam ettiği bir nesne olacaktırComponent.default
Scott Silvi

Bunu kullanmadan nasıl yapılacağını bilen var module.exportsmı? Bir grup bileşeni bir paket haline getirme yöntemini seviyorum index.jsama sözdizimini çözemiyorum. import x from 'x'; import y from 'y'; export default {x, y};o import {x} from xy;zaman işe yaramıyor (ve neden olmadığını anlayamıyorum)
Alex McMillan

2
Alex, onun export {x, y}yerine denedin mi?
jtompl

Bu cevap es6 değil. EcamScript olmayan bir platform. -1
rektide
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.