Browserify多次解析相同的文件 [英] Browserify resolves the same file multiple times

问题描述

我遇到一个奇怪的问题，运行最新的browserify（10.2.4）和gulp。
似乎同一个文件被多次解析，所以创建单例时我没有得到相同的实例。
我在module.exports之前放了一个'调试器'，并验证它被调用两次。注：＃1：我猜测说，browserify基于字符串缓存文件，所以当调用来自不同地方的相对路径不会有相同的字符串时，即使它们指向同一个地方。

note＃2：我一直在使用Browserify 3〜，并且只有当我升级它时才开始发生。

示例：

鉴于：

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

/folder1/foo.js：

  function Foo（）{} 
 module.exports = new Foo（）; //创建一个单例
  

/folder2/bar.js

  var foo = require（'../ folder1 / foo'）; 
函数Bar（）{
 //用foo做
} 
 module.exports = Bar; 
  

/app.js

  var foo = require（'./ folder1 / foo'），
 Bar = require（'./ folder2 / bar'）; 
 var bar = new Bar（）; 
 //现在'foo'这里和Bar里面的'foo'不是同一个实例。 
  

解决方案

你应该改变你的架构：

/folder1/foo.js：

 函数Foo（）{} 
 module.exports = Foo; 
  

/folder2/bar.js $ b

 函数Bar（foo）{
 //用foo 
做某事} 
 module.exports = Bar; 
  

/app.js

  var Foo = require（'./ folder1 / foo'），
 var Bar = require（'./ folder2 / bar'）; 
 var bar = new Bar（new Foo（））; 
  

我遇到同样的问题，我发现它只是一种不可思议的建筑风格。 p>

编辑：这样，您就拥有了一个单身人士，即由主要组件/类（ app的.js ）。例如：想象一下，您有一个子组件/子类，它需要一个 config 目的。 - > App.js使用SubComponent.js。 您的方式： require 'config'（作为单例实现）并使用它为组件。

问题：现在您要添加另一个需要其他 config 对象。它不适用于您的解决方案。

解决方案：让您的父组件处理所有单件（配置对象）。

I am facing a strange problem running latest browserify (10.2.4) and gulp. It seems that the same file is being resolved multiple times, and so I don't get the same instance when creating a singleton. I've put a 'debugger' before module.exports and verified it is called twice.

note #1: I have a guess that says that browserify caches the files based on the string, and so when calling relative paths from different places will not have the same string, even though they point to the same place.

note #2: I was using Browserify 3~ until now, and only when I upgraded it started happening.

Example:

Given:

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.

解决方案

You should change your architecture like this:

/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());

I had the same problem, and i found out that it is simply an impractible architectural style.

EDIT: This way, you have a "singleton", that is just managed by the main component/class (app.js).

For example: Imagine, you have a subcomponent/subclass that needs a config object. -> App.js uses SubComponent.js.

Your way: require 'config' (implemented as singleton) and use it for the component.

Problem: Now you want to add an other SubComponent of the same type that also needs an other config object. It wouldn't work with your solution.

Solution: Let your parent component handle all "singletons" (config objects).

这篇关于Browserify多次解析相同的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！