2016-04-29 13 views
7

Web paketi kullanarak bir uygulama oluşturmaya çalışıyorum ancak bir sorun buldum. Uygulama için yığın React + Flux mimarisi (ES6 sözdizimi kullanılabilir) ve yapı sistemi için webpack kullanıyorum. Çözmeyi denediğim problem, bir uygulamanın inşa sistemi için bir fikirdir; bu, alt dizindeki çekirdek içinde yer alan çekirdek modül ve alt modüller içine ayrılır. Çekirdek sistem temel özellikleri (dağıtıcı, temel Akı eylemleri ve çekirdek görüntüleme modülü gibi) sağlamalıdır ve eklentiler uygulamayı genişletmek için temel özellikleri içe aktarabilmelidir.Çekirdek ve alt modülleriyle uygulama için Webpack derlemesi

Geçerli derleme çözümü bir uygulama oluşturmama izin veriyor, ancak muhtemelen çoğaltılmış olan modüllerle ilgili bir sorunum var. Çekirdek modülde bulunan Eklenti mağaza yarattım ve çekirdek içinde farklı modülleri kaydetmek için izin veren registerPlugin eylem.

Çekirdek modülün, yeniden adlandırılan bileşen ve eylemleri (eklentiyi kaydetmek için de) dışa aktardığım index.js dosyasındaki eklentiler için giriş noktası vardır.

// core index.js 
export * as AppDispatcher from './src/dispatcher/AppDispatcher'; 
export BaseModel from './src/models/BaseModel'; 
export registerPlugin from './src/actions/registerPlugin'; 
// etc.. 

Bu dosya, her eklenti ile içe aktarılır ve bu modüllere erişim izni verir.

Ayrıca, her eklenti, çekirdek için ürün bir araya getiren index.js dosyasını gösterir. Daha sonra çekirdek bu dosyayı alır ve önyükleme işlemi sırasında içe aktarır.

// bootstrap app/entry point for webpack 
import 'plugins/plugin-1'; 
import 'plugins/plugin-2'; 
... 

Her şey iyi çalıştı, ancak sonra (muhtemelen) bağımlılıklar çoğaltmasıyla ilgili bir sorun buldum. Kodu koddan ayıklamayı denediğimde, eylem için kaydedilen Plugin deposu çağrılıyormuş gibi görünüyor, ancak her mağaza farklı bir örnektir, yani temelde depodaki değişiklik modülünü dinlerken bu değişikliği görmüyorum çünkü farklı bir mağaza değişti, muhtemelen iki dağıtıcı burada ve belki iki eylem ...).

Bu, dairesel bağımlılıklarla ilgili bir sorun mu? Web paketini yapılandırmanın herhangi bir yolu var mı bu yüzden bu eylemleri çoğaltmayacak?

Ayrıca, belirtilmesi gereken bir şey, her eklentinin, eklenti paketi oluşturmama izin veren web paketi yapılandırmasına sahip olmasıdır ve bu paket çekirdek modül tarafından yakalanır ve daha sonra çekirdek modül için web paketi tüm uygulama için paket oluşturur.

+0

Webpack eklentileriniz nelerdir? Webpack.optimize.DedupePlugin() webpack eklemeyi biliyorsanız, mümkünse paket kodunuzu kopyalar. –

+1

DedupePlugin'i kullanarak (sürümleri oluştururken) denedim ancak – Kamil

cevap

0

Neden çekirdek nesnesini global olarak göstermiyorsunuz? O zaman ES6 destructuring kullanarak imha edebilirsiniz.
Bazı büyük olasılıkla, global değişkenlerin korkunç bir fikir olduğunu ve ES6 ve commonJs modüllerinin arkasında yatan ana fikir olmadığını ve bunların doğru olduğunu söyleyebiliriz, ancak bu özel durumda, çekirdek modülün ana işlevlerini tek bir nesne olarak açığa çıkarın (ve lütfen Herşeyi açığa vurmayın!) gelecekte çok fazla komplikasyon kurtaracak.

+0

Plus'a yardımcı olmadım. Gerçekten web paketinizin yapılandırmasını tam olarak bilmiyorum, bu yüzden aklıma gelen ilk şey buydu. – HosseinAgha

İlgili konular