Question

我正在尝试使用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>

我在使用browserify时遇到了什么问题？提前谢谢。

编辑：表示错误示例。

原始错误的例子

foo.js：

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

module.exports = foo;

Answer 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()在脚本中创建对象。

Answer 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'); }
}

Answer 3

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

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

3 个答案: