javascript - Browserify 多次解析同一个文件

Question

我在运行最新的 browserify (10.2.4) 和 gulp 时遇到了一个奇怪的问题。似乎同一个文件被多次解析，所以在创建单例时我没有得到相同的实例。我在 module.exports 之前放了一个“调试器”并验证它被调用了两次。

注意#1:我猜测 browserify 根据字符串缓存文件，因此当从不同地方调用相对路径时，即使它们指向同一个地方，也不会有相同的字符串。

注意#2:我一直在使用 Browserify 3~ 直到现在，只有当我升级它才开始发生。

示例:

给定:

app.js
/folder1/foo.js
/folder2/bar.js

/folder1/foo.js:

function Foo(){}
module.exports = new Foo(); // Creating a singleton

/folder2/bar.js

var foo = require('../folder1/foo');
function Bar(){
// do something with foo
}
module.exports = Bar;

/app.js

var foo = require('./folder1/foo'),
Bar = require('./folder2/bar');
var bar = new Bar();
// Now 'foo' here and 'foo' inside Bar are not the same instance.

Answer 1

你应该像这样改变你的架构:

/folder1/foo.js:

function Foo(){}
module.exports = Foo;

/folder2/bar.js

function Bar(foo){
// do something with foo
}
module.exports = Bar;

/app.js

var Foo = require('./folder1/foo'),
var Bar = require('./folder2/bar');
var bar = new Bar(new Foo());

我也遇到了同样的问题，后来我发现这只是一种不切实际的架构风格。

编辑:这样，您就有了一个“单例”，它仅由主要组件/类 (app.js) 管理。

例如:想象一下，您有一个需要config 对象的子组件/子类。 -> App.js 使用 SubComponent.js。

您的方式:require 'config'(作为单例实现)并将其用于组件。

问题:现在您想要添加另一个相同类型的子组件，该子组件还需要另一个config 对象。它不适用于您的解决方案。

解决方案:让您的父组件处理所有“单例”(配置对象)。