2016-04-29 5 views
7

webpackを使用してアプリケーションを構築しようとしていますが、問題が見つかりました。アプリケーションのスタックはです。React + Fluxアーキテクチャ(ES6構文が利用可能)、ビルドシステムではwebpackを使用しています。私が解決しようとしている問題は、アプリケーションのビルドシステムのアイディアです。これは、コアモジュールとサブディレクトリのコアの内側にあるサブモジュールに分割されています。コアシステムは基本機能(ディスパッチャ、基本的なFluxアクション、コアビューモジュールなど)を提供し、プラグインはアプリケーションを拡張するためにコア機能をインポートできる必要があります。コアパックとサブモジュールを含むアプリケーションのWebpackビルド

現在のビルドソリューションではアプリを作成できますが、おそらく複製されているモジュールに問題があります。私はプラグインストアをコアモジュール内にあり、registerPluginというアクションを作成し、コア内に異なるモジュールを登録することができます。

コアモジュールには、resuableコンポーネントとアクションをエクスポートするindex.jsファイル内のプラグイン用のエントリポイントがあります(プラグインの登録用)。

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

このファイルは各プラグインとともにインポートされ、それらのモジュールにアクセスできます。

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

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

また、各プラグインはコアのバンドル製品を返すindex.jsファイルを公開しています。コアは単にファイルを取得し、ブートストラッププロセス中にインポートします。

すべてがうまくいったが、(おそらく)依存関係の重複に問題があることがわかった。コアからコードをデバッグしようとすると、プラグインストア、アクション用に登録されているストアが呼び出されているようですが、各ストアは別のインスタンスなので、基本的にはコアモジュールのストア変更を聞いていますおそらく2人のディスパッチャーがいて、おそらく2つのアクション...)。

これは循環依存性に問題がありますか?そのアクションを複製しないようにwebpackを設定する方法はありますか?

また、各プラグインには独自のwebpack構成があり、プラグイン用のバンドルを作成できます。そのバンドルはコアモジュールで取得されており、コアモジュール用のwebpackはアプリケーション全体のバンドルを作成しています。

+0

ウェブパックプラグインとは何ですか? webpack.optimize.DedupePlugin()を追加すると、可能であればバンドルされたコードの重複がなくなります。 –

+1

私はDedupePlugin(distバージョンの作成中)を使ってみましたが、助けにならなかった – Kamil

答えて

0

なぜあなたはコアオブジェクトをグローバルに公開しませんか?
その後、ES6 destructuringを使用して破壊することができます。
おそらく、グローバル変数はひどい考えであり、ES6とcommonJsモジュールの背後にある主要なアイデアであり、正しいですが、この特別なケースではコアモジュールの主要な機能を単一のオブジェクトとして公開しますすべてを公開しないでください!)将来の多くの合併症を軽減します。

+0

プラス私は本当にあなたの正確なウェブパック設定を知らないので、それは私の心に来た最初のものでした。 – HosseinAgha

関連する問題