使用 bowserify 从导出模块创建新对象答案

【问题标题】：Create a new object from export modules using bowserify使用 bowserify 从导出模块创建新对象
【发布时间】：2014-02-12 02:12:01
【问题描述】：

我正在尝试使用我使用 browserify 从 javascript 文件中公开的对象，但我不断收到错误 Uncaught TypeError: undefined is not a function

这是一个例子：

foo.js:

var foo = function() {
  this.f1 = function(){
    console.log('function1')
  }
  this.f2 = function(){
    console.log('function2')
  }
};

module.exports = foo;

我正在尝试在 index.html 中使用 foo。

输入命令后：browserify foo.js > bundle.js

并将bundle.js 包含到 html 文件中。

index.html:

<html>
  <head>
    <script src="./bundle.js"></script>
    <script>
      var foo = new foo();  // Uncaught TypeError: undefined is not a function

      foo.f1();
    </script>
  </head>

  <body>

  </body>
</html>

我在浏览器中做错了什么？提前致谢。

编辑： 错误示例。

原来的错误例子

foo.js:

var foo = {
  f1: function(){
    console.log('function1')
  },
  f2: function(){
    console.log('function2')
  }
};

module.exports = foo;

【问题讨论】：

标签： javascript jquery browserify

【解决方案1】：

如果你想使用new，你应该像这样声明foo类：

foo = function() {
  this.f1 = function(){
    console.log('function1')
  };
  this.f2 = function(){
    console.log('function2')
  };
};

foo_obj = new foo();
foo_obj.f1();
foo_obj.f2();

而不是文字。否则，只需 foo 对象的方法。

var foo = {
  f1: function(){
    console.log('function1')
  },
  f2: function(){
    console.log('function2')
  }
};

foo.f1();
foo.f2();

更新：

让我们看看，我从来没有使用过browserify，但是根据他们的docs，你应该这样做：

foo.js

module.exports = function() {
  this.f1 = function(){
    console.log('function1')
  },
  this.f2 = function(){
    console.log('function2')
  }
};

main.js

var foo = require('foo');

然后，做：

browserify main.js -o bundle.js

最后导入 bundle.js 并使用 new foo() 在脚本中创建对象。

【讨论】：

我们并行工作，你打败了我。我向你致敬@Sergio Aristizábal
对不起，我犯了一个愚蠢的错误。但是在我改变你的答案后，我仍然无法在browserify中定义函数
我的原始代码和你回答的一样。抱歉打错样本了。
module.exports = {foo: foo}; 怎么样？
@SergioAristizábal 感谢您的所有工作！但是我检查过的答案是有效的，我认为是最好的答案。再次感谢。

【解决方案2】：

你试图实例化一个对象，就好像它是一个函数一样，例如

new {}; // invalid!!
new function() {}; // valid!

我建议你使用任何一个

exports.foo1 = function() { console.log('foo'); }
exports.bar1 = function() { console.log('bar'); }

或者如果你真的想保留new foo()，请使用：

module.exports = foo;
function foo() {
    this.foo1 = function() { console.log('foo'); }
    this.bar1 = function() { console.log('bar'); }
}

【讨论】：

【解决方案3】：

browserify foo.js --standalone foo > bundle.js

【讨论】：