我正在尝试使用Webpack构建一个应用程序,但发现了一个问题。该应用程序的堆栈为React + Flux 架构(可使用ES6语法),并且构建系统使用Webpack。我要解决的问题是构建应用程序的思路,将其分为核心模块和位于核心子目录中的子模块。核心系统应提供基本功能(如调度程序、基本Flux操作和核心视图模块),插件应能够导入核心功能以扩展应用程序。
当前的构建解决方案允许我构建应用程序,但是我遇到了可能重复的模块问题。我创建了 Plugin 存储库,位于核心模块中,并且创建了registerPlugin 操作,允许在核心中注册不同的模块。
核心模块在index.js文件中为插件提供入口点,在那里我导出可重用的组件和操作(也用于注册插件)。
一切都运行良好,但我发现(可能是)依赖项重复的问题。当我尝试从核心代码中调试时,似乎注册到动作的插件存储正在被调用,但每个存储都是不同的实例,所以基本上当我在核心模块中监听存储更改时,我看不到那个更改(因为可能有一些不同的存储已经更改了,它们可能有两个分派器,也许有两个动作...)。
这是否是循环依赖的问题?是否有任何方法可以配置Webpack,以便它不会重复那些操作?
还值得一提的是,每个插件都有自己的Webpack配置,这使我可以为插件创建捆绑包,然后核心模块抓取该捆绑包,然后核心模块的Webpack会为整个应用程序创建捆绑包。
当前的构建解决方案允许我构建应用程序,但是我遇到了可能重复的模块问题。我创建了 Plugin 存储库,位于核心模块中,并且创建了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文件,返回核心产品的捆绑包。然后,在启动过程中,核心只需获取该文件并导入它。
// bootstrap app / entry point for webpack
import 'plugins/plugin-1';
import 'plugins/plugin-2';
...
一切都运行良好,但我发现(可能是)依赖项重复的问题。当我尝试从核心代码中调试时,似乎注册到动作的插件存储正在被调用,但每个存储都是不同的实例,所以基本上当我在核心模块中监听存储更改时,我看不到那个更改(因为可能有一些不同的存储已经更改了,它们可能有两个分派器,也许有两个动作...)。
这是否是循环依赖的问题?是否有任何方法可以配置Webpack,以便它不会重复那些操作?
还值得一提的是,每个插件都有自己的Webpack配置,这使我可以为插件创建捆绑包,然后核心模块抓取该捆绑包,然后核心模块的Webpack会为整个应用程序创建捆绑包。