将Browserify与Backbone或Underscore等JavaScript库一起使用？

Question

我知道我可以使用npm安装下划线，但这不是我在工作环境中可以做的事情。我需要能够下载Underscore.js库，然后使其“兼容浏览器”。

所以让我们假设Underscore.js看起来像这样：

(function() {
    var root = this;

    // Rest of the code

}.call(this));

我在硬盘上下载了该文件并将其保存为under.js。

我需要下划线的文件如下所示：

var underscore = require("./under");
console.log(underscore);

然后我从cli运行browserify。

我有一个名为test.html的HTML页面，基本上它只是加载生成的bundle.js。

然而，console.log(underscore)行失败 - 表示underscore为undefined。

我尝试了什么？

显然我在第一行添加了module.exports - 就在under.js中的函数定义之前，这就是我如何得到上面提到的错误。我也试过this answer的方法，但仍然遇到了同样的错误。

那么，如何在不使用npm安装模块的情况下使用Browserify加载Underscore.js或Backbone等库？

Answer 1

这是因为browserify不会将变量添加到全局范围。您下载的版本与通过NPM安装的版本相同。

您需要将其显式附加到窗口以将其导出到顶级范围。

如果您创建名为＆＃34; expose_underscore.js＆＃34;把它放进去：

var _ = require('./under');
window._ = _;

将执行此操作，然后执行：browserify expose_underscore.js > bundle.js，然后将bundle.js添加为<script>标记，您可以在控制台中执行以下操作：

但是，如果您使用browserify，则不应该这样做。它背后的一点（以及Node的commonJS版本）就是你明确要求它到处都需要它。因此，您需要下划线的每个文件都应将其导入局部变量。

不用担心 - 您仍然只会加载一份副本。

Answer 2

我通常将我的供应商库（如Underscore）添加为脚本标记。 Underscore会将自己附加到全局范围，因此您无需在任何地方使用它。

如果您确实希望以浏览器化方式使用它，请验证您的require语句中是否有正确的路径（browserify要求是相对路径）并将module.exports语句移动到文件末尾。