Question

我尝试使用Browserify，以便在浏览器中使用npm包。我尝试使用的套餐是this

我有一个fcs.js文件：

// Use a Node.js core library
var FCS = require('fcs');

// What our module will return when require'd
module.exports = function(FCS) {
  return FCS;
};

还有一个index.js文件：

var FCS = require('./fcs.js');

console.log('FCS IS ');
console.log(FCS);

然后我跑了：

browserify index.js > bundle.js

并创建了一个index.html文件：

<html>
<script src="bundle.js"></script>
<script>
    var fcs = new FCS();

</script>
</html>

但我最终得到了错误：

Uncaught ReferenceError: FCS is not defined

也许我没有正确理解这个概念。我如何在浏览器中使用此包？谢谢。

Answer 1

不要这样做：require('./fcs.js');

执行此操作：require('./fcs');

当你require时，扩展名是隐式.js。另外，请确保您的模块FCS有一个入口点（默认为index.js，但您可以在main中的package.json条目中进行更改。< / p>

此外，在您的index.html文档中，您预计FCS是一个全局对象。我还没有看到FCS的内部代码，但如果它附加到window对象，它只会全局可用。

当您require某事时，只有在需要的其他代码中才能使用它。如果您希望全局可用，则必须将其附加到window对象，就像其他任何内容一样。

换句话说，FCS模块的内部结构可能类似于：

// node_modules -> fcs -> index.js

var FCS = function() {};

window.FCS = FCS; // this makes it globally available

module.exports = FCS; // this lets you require it

Answer 2

@JoshBeam的回答是正确的 - 为了公开browserify包中的资产，您需要将某些内容附加到window对象。但我没有暴露特定资产，而是想要更通用的东西。

这就是我的所作所为：

在app.js

中

require('this')
require('that')
require('./modules/mycode')
...

window.req = require

在我的HTML <script>标记中：

something = req('./modules/mycode')

请注意，我没有直接将require函数分配给window.require，而是给它一个不同的名称。原因很简单：如果你调用它window.require，你就会覆盖原来的require，你会发现自己处于一个无限循环的递归中（至少在浏览器耗尽堆栈之前）空间）。

Answer 3

问题是您的内联脚本（在index.html中）期望存在一个名为FCS的全局变量（当您执行new FCS()时）。情况并非如此，因为在index.js中，您的FCS变量的范围限定为该文件。

您应该将所有脚本编写在单独的文件中，并使用browserify将它们全部捆绑，避免使用内联脚本或将FCS设为全局，方法是将其附加到window。

使用Browserify在浏览器中使用NPM包

3 个答案: