爲核心和子模塊應用程序構建的Webpack

我試圖使用webpack構建一個應用程序，但發現一個問題。該應用程序的堆棧是React + Flux體系結構（ES6語法可用）和構建系統我使用的是webpack。我試圖解決的問題是構建應用程序的系統的一個想法，該應用程序被分解爲位於核心子目錄內的核心模塊和子模塊。核心系統應該提供基本功能（如調度程序，基本的Flux操作和核心視圖模塊），插件應該能夠導入核心功能來擴展應用程序。爲核心和子模塊應用程序構建的Webpack

當前構建解決方案允許我構建一個應用程序，但是我遇到了可能重複的模塊問題。我創建了插件存儲位於核心模塊，並且還有registerPlugin動作，允許在覈心內註冊不同的模塊。

核心模塊具有插入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文件，該文件返回core的捆綁產品。然後核心簡單地抓取該文件並在引導過程中導入它。

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

一切運作良好，但後來我發現（可能）依賴項重複的問題。當我試圖從核心調試代碼似乎插件存儲，註冊的行動正在被調用，但每個商店是不同的實例，所以基本上當我正在聽核心模塊中的商店更改我沒有看到這種變化（因爲一些不同的商店已經改變了，可能兩個調度員在這裏，也許兩個動作......）。

這是循環依賴問題嗎？有什麼辦法可以配置webpack，使其不會重複該操作？

另外值得一提的是，每個插件都有自己的webpack配置，它允許我爲插件創建bundle，並且該bundle正在被核心模塊抓取，然後webpack for core模塊爲整個應用程序創建bundle。

來源

2016-04-29 Kamil

什麼是您的webpack插件？我知道如果添加webpack.optimize.DedupePlugin（），webpack將在可能的情況下去除您的捆綁代碼。 –

我試過使用DedupePlugin（創建dist版本時），但它沒有幫助 – Kamil

爲什麼你不公開全局核心對象？
然後你可以使用ES6 destructuring來銷燬它。
有些人可能會說全局變量是一個可怕的想法，不使用它們是ES6和commonJs模塊背後的主要思想，它們是正確的，但在這種特殊情況下，將核心模塊的主要功能作爲單個對象公開不要暴露一切！）將會爲您節省很多複雜的事情。

來源

2016-05-12 08:35:03 HosseinAgha

另外我真的不知道你的確切webpack配置，所以這是我想到的第一件事。 – HosseinAgha

爲核心和子模塊應用程序構建的Webpack

回答

相關問題