我正在尝试使用webpack构建一个应用程序,但发现了一个问题.应用程序的堆栈是React Flux架构(可用ES6语法),对于构建系统,我使用的是webpack.我试图解决的问题是应用程序的构建系统的想法,它被分解为核心模块和位于子目录核心内部的子模块.核心系统应提供基本功能(如调度程序,基本Flux操作和核心视图模块),插件应能够导入核心功能以扩展应用程序.
当前的构建解决方案允许我构建一个应用程序,但我遇到了可能重复的模块的问题.我创建了位于核心模块中的插件存储,以及允许在核心内部注册不同模块的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配置,允许我为插件创建bundle,并且该bundle正被核心模块抓取,然后webpack for core module正在为整个应用程序创建bundle.
解决方法
为什么不在全局公开核心对象？
然后你可以用 ES6 destructuring破坏它. 有些人可能会说全局变量是一个糟糕的想法,不使用它们是ES6和commonJs模块背后的主要思想,它们是正确的,但在这个特殊情况下,将核心模块的主要功能暴露为单个对象(请不要揭露一切！)将来会为你节省很多复杂功能.
然后你可以用 ES6 destructuring破坏它. 有些人可能会说全局变量是一个糟糕的想法,不使用它们是ES6和commonJs模块背后的主要思想,它们是正确的,但在这个特殊情况下,将核心模块的主要功能暴露为单个对象(请不要揭露一切！)将来会为你节省很多复杂功能.
