ES6 dizin dosyasında dışa / içe aktarma


203

Şu anda webpack / babel üzerinden bir React uygulamasında ES6 kullanıyorum. Bir modülün tüm bileşenlerini toplamak ve vermek için dizin dosyaları kullanıyorum. Ne yazık ki, bu şöyle görünüyor:

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

Yani güzel böyle başka yerlerden alabilirsiniz:

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

Açıkçası bu çok hoş bir çözüm değil, bu yüzden başka bir yol olup olmadığını merak ediyordum. İçe aktarılan bileşeni doğrudan dışa aktaramıyorum.


Yanıtlar:


372

Varsayılan içe aktarmayı kolayca yeniden dışa aktarabilirsiniz:

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

Ayrıca ES7 ES8 için yazmanıza izin verecek bir teklif varexport Comp1 from '…'; .



6
ES8 teklifine ek olarak, dizin dosyalarını korumak için kod oluşturma özelliğini kullanabilirsiniz. Github.com/gajus/create-index ve github.com/ryardley/indexr adresine bir göz atın .
Gajus

@Bergi Peki bu 3 satır hem ithalat hem de ihracat yapıyor mu? Yoksa bu sadece dışa aktarılıyor, ancak artık Comp1_ adı vs. ile uğraşmanıza gerek yok mu?
musicformellons

@musicformellons Başvurulan modülden doğrudan dışa aktarılıyorlar, evet.
Bergi

2
@amann kendisinin bir dairesel referans kötü değil, ama olabilir modül ne bağlı sorunlara yol açar. Ne olursa olsun, tüm bileşenleri dışa aktarmak için bu deseni sadece kitaplığınızın dizin dosyasında kullanmanız gerektiğini düşünüyorum ve modüller arası bağımlılıklarınız varsa, parçayı büyük olandan almak yerine doğrudan içe aktarmalısınız. Bununla, bu model tarafından dairesel referanslar verilmez.
Bergi

56

Ayrıca, aynı anda birden fazla işlevi dışa aktarmanız gerekirse, eylemler gibi kullanabileceğinizi unutmayın.

export * from './XThingActions';

14
Evet. Neyse ki bu yalnızca adlandırılmış dışa aktarmaları alır, yani varsayılan dışa aktarmayı içermez.
ArneHugo

beni al (oldukça yanıltıcı ... biraz zamanımı aldı) SyntaxError: Unexpected reserved word, @ Bergi'nin kabul edilen cevabı işe yarıyor.
Frank Nocke

Bu sorunu aşmak için varsayılan dışa aktarma işleminizi de adlandırabilirsiniz. İşlemlerinizde varsayılan bir dışa aktarma olmamalıdır, bu nedenle bu çözüm iyi çalışır.
Barry Michael Doyle

2
en iyi uygulama, javascript, gereksiz ekstra sözdiziminde varsayılan dışa aktarmaları kullanmamaktır. @GM, modern javascript için bu konuda en iyi cevaba sahiptir.
mibbit

39

Çok geç ama çözdüğüm yolu paylaşmak istiyorum.

Having modeliki adında ihracat var file:

export { Schema, Model };

ve controllervarsayılan dışa aktarmaya sahip dosyaya sahip olmak:

export default Controller;

Ben indexdosyada bu şekilde maruz :

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

export { Schema, Model, Controller };

ve hepsini içe aktarmak istediğimi varsayarak:

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

Bu, bir işlevi içe aktarıp geri aktardığınızda çalışır mı? Denedim ama olmadı.
Aftab Naveed

Üzgünüm aslında işe yaradı, yolumda / eksikti.
Aftab Naveed

14

basitçe:

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

Veya işlev adlarına göre:

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

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

Daha fazla bilgi: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export


1

Yükleme @babel/plugin-proposal-export-default-fromyöntemi:

yarn add -D @babel/plugin-proposal-export-default-from

Reklamlara .babelrc.jsonveya herhangi Yapılandırma Dosya Türleri

module.exports = {
  //...
  plugins: [
     '@babel/plugin-proposal-export-default-from'
  ]
  //...
}

Şimdi exportdoğrudan aşağıdakilerden yapabilirsiniz file-path:

export Foo from './components/Foo'
export Bar from './components/Bar'

İyi şanslar...


Create-React-App için çıkarmadan nasıl yapılır?
Negin Basiri
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.