Browserify Babel ES2015 Knockout 依赖模块

Question

我创建了一组单例模块，这些模块加载了各种淘汰组件，并为它们各自的功能区域提供了一个中央 "command and control"。我们称它们为 FooModule 和 BarModule

因此，典型的 Knockout 组件将具有

const ko = require('knockout'),
    FooModule =require('../Singletons/FooModel'),
    BarModule =require('../Singletons/BarModel');

这似乎运作良好，每个模块都支持各种可观察对象和函数

问题是，我需要 FooModel 要求 BarModel，而 BarModel 要求 FooModel。

如果它不是单例（例如 Class），这可能无关紧要，但是我不能为每个组件的每个模块单独设置 class，否则我将无法跨组件通信（每个页面通常有 3-7 个组件，其中一些是重复的但具有不同的数据）

目前 FooModel 需要 BarModel，反之亦然，但结果对象是 {}，这大概是 Browserify 如何处理相互需要的文件

目前每个单例模块相当于：

FooModel...
    const ko = require('knockout');
    const BarModel = require('./BarModel');
    let hiddenVariable = 42 ;
    const FooModel = {
       FooMonitor : ko.observable(false),
       FooFunction : (variable) => { functionFoo(variable) }
    }
    const functionFoo = (variable) => {
        return variable === hiddenVariable ;
    };
    module.export FooModel ;


BarModel...
    const ko = require('knockout');
    const FooModel = require('./FooModel');
    let hiddenVariable = 24 ;
    const BarModel = {
       BarMonitor : ko.observable(false),
       BarFunction : (variable) => { functionBar(variable) }
    }
    const functionBar = (variable) => {
        return variable === hiddenVariable ;
    };
    module.export BarModel ;

每个 Knockout 组件都需要 FooModel 和 BarModel，但是如果我添加

console.info(BarModel)

在 FooModel 模块中，浏览器获取 {}（空对象）

Answer 1

如果 FooModel 需要 BarModel，BarModel 不能需要 FooModel。这是一个模块捆绑器限制。

Browserify 将自动删除未使用的依赖项。这就是为什么当您开始使用 FooModel 中的 BarModel 时，模块输出仅被剥离为 {}。

结合@spender 的评论 - 当您发现循环依赖时，是时候更改架构了。事件是解耦模型的好方法（在这种情况下，使用 KO.postbox 会很好）。

Answer 2

我认为您需要一个同时需要 Foo 和 Bar 的控制模块。然后可以通过传入Bar来初始化Foo，传入Foo来初始化Bar。

Browserify Babel ES2015 Knockout 依赖模块

Browserify Babel ES2015 Knockout co-dependent modules

javascript

knockout.js

ecmascript-6

browserify

babeljs