使用 browserify 需要 jQuery 和 lodash答案

【问题标题】：Requiring jQuery and lodash with browserify使用 browserify 需要 jQuery 和 lodash
【发布时间】：2014-12-02 01:28:56
【问题描述】：

我喜欢browserify 的想法，但是我在需要“全局”变量（如jQuery 和lodash）时遇到了麻烦。我希望：

// application.js
var $ = require('jquery')
var _ = require('lodash')
var a = require('./path/to/module/a.js')

使$ 和_ 可用于模块a。毕竟，该代码已编译，并且首先定义了$ 和_。但是我遇到了一个问题，页面无法加载，说 $ 和 _ 未定义。好吧，我不明白，但至少我会期望：

// a.js
var $ = require('jquery')
var _ = require('lodash')

var AClass = function() {
  console.log($, _)
}
module.exports = AClass

运行没有问题。但是，我不断收到错误消息，提示 $ 和 _ 未定义，即使在这两个文件中以下代码都有效：

var $ = require('jquery')
var _ = require('lodash')
console.log($, _)

除此之外，我的应用程序是否有问题，或者我对 browserify 有什么根本不了解的地方？

【问题讨论】：

如果你想在a中使用jquery和lodash，你需要在a模块中使用jquery和lodash。
我有同样的问题，但我需要在同一个文件中使用 lo-dash，并且在 _.extend bla bla 之前 - lodash 有效，但我不能在函数中使用 lodash... 代码示例在这里 - pastebin.com/YufmJiqF你的问题解决了吗？
嗯，解决问题。只需将 _ 重命名为“lodash”，一切正常；）

【解决方案1】：

我们正在使用 browserify（在我们的例子中使用 gulp）并且我们像使用 thw 窗口对象一样初始化全局变量。这样，如果您必须进行一些测试，您也可以在控制台中使用它们。

window._ = require('lodash');

或者，如果你使用 ES6：

import _ from 'lodash';
window._ = _;

希望对你有帮助

【讨论】：

【解决方案2】：

使用现代 JavaScript，工具会尽量避免使用全局变量。如果您在浏览器中查看代码，您可能会看到如下内容：

(function() {
    var $ = require('jquery');
})();

由于$ 被包装在一个函数中，它不再是一个全局变量。

解决这个问题的正确方法是在a 中添加require。这不是很昂贵，因为require() 将始终为每个需求名称返回相同的（缓存的）对象。

另一种选择是使用手动使局部变量全局化

window.$ = $;

在您的第一个模块中。但这有几个缺点：

这就是为什么最好在每个模块中使用require()。

【讨论】：