Webpack build per applicazione con moduli core e sub

Question

Sto provando a creare un'applicazione utilizzando il webpack ma ho trovato un problema. Lo stack per l'applicazione è Architettura React + Flux (sintassi ES6 disponibile) e per il sistema di compilazione sto utilizzando il webpack. Il problema che sto cercando di risolvere è un'idea per il sistema di compilazione di un'app, che è suddivisa in modulo principale e sottomoduli che si trovano all'interno del nucleo nella sottodirectory. Il sistema centrale dovrebbe fornire funzionalità di base (come dispatcher, azioni di base di Flux e modulo di visualizzazione di base) e i plug-in dovrebbero essere in grado di importare funzionalità di base per estendere l'app.

La soluzione di generazione corrente consente di creare un'app, ma ho un problema con i moduli probabilmente duplicati. Ho creato lo store Plugin che si trova nel modulo principale e anche l'azione registerPlugin che consente di registrare diversi moduli all'interno del core.

Il modulo principale ha un punto di ingresso per i plug-in nel file index.js in cui sto esportando componenti e azioni resuable (anche per la registrazione del plug-in).

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

Quel file viene importato con ciascun plug-in e mi consente di accedere a tali moduli.

// bootstrap plugin/entry point for plugin webpack 
import {registerPlugin} from 'core-module'; 

// plugin index.js 
require('./dist/plugin'); 

Inoltre, ogni plug-in espone il file index.js che restituisce il prodotto in bundle per il core. Quindi core semplicemente afferra quel file e lo importa durante il processo di bootstrap.

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

Tutto ha funzionato bene, ma poi ho trovato un problema con (probabilmente) la duplicazione dipendenze. Quando ho provato a eseguire il debug del codice dal core, sembra che sia stato chiamato il plug-in, registrato per l'azione, ma ogni negozio è un'istanza diversa, quindi in pratica quando ascolto i cambiamenti del negozio nel modulo principale non vedo quel cambiamento (perché è cambiato un negozio diverso, probabilmente due committenti sono qui, e forse due azioni ...).

È un problema con le dipendenze circolari? C'è un modo per configurare il webpack in modo che non duplichi le azioni?

anche la cosa vale menzionare è che ogni plugin ha propria configurazione webpack che mi permette di creare bundle per plugin e quel fascio sia afferrato dal modulo di base, e quindi webpack per modulo principale è la creazione bundle per intera applicazione.

Answer 1

Perché non esponi il tuo oggetto principale globalmente?
Quindi è possibile distruggerlo utilizzando ES6 destructuring.
Alcuni probabilmente direbbero che le variabili globali sono una pessima idea e non usarle è stata l'idea principale dei moduli ES6 e commonJs e hanno ragione, ma in questo caso speciale si espongono le funzionalità principali del modulo principale come un singolo oggetto (e per favore non esporre tutto!) ti farebbe risparmiare molte complicazioni in futuro.