为什么这个 jquery 插件不需要 shim 就可以工作？

Question

填充 jQuery 插件似乎只适用于在正确的肩膀上撒盐的天才。

然而我这样做了....

    var backbone = require('backbone');
    global.jQuery = global.$ = backbone.$ = require('jquery');

    require('./libs/jquery-modal');

    $("body").Modal();

而且效果很好。（n.b。jquery 正在通过 debowerify 加载）

为什么这样做？填充它是否意味着我不需要对 jquery 和 $ 进行分配？

browserify 如何处理我的插件代码不是正确的 commonjs 格式？

Answer 1

我假设你在谈论 browserify-shim。

Shimming 用于使与 commonjs 不兼容的文件可浏览。

要与 commonjs 兼容，文件必须导出某些内容。这是一个简单的 commonjs 模块：

// mystring.js
module.exports = "Hello Whosebug";

现在在其他一些文件中，您可以要求 mystring.js 并像这样使用它：

var str = require('./mystring.js');
console.log(str); // > "Hello Whosebug"

jQuery

在 jQuery 的旧版本（1.11 和 2.1 之前）中，没有导出任何内容。相反 jQuery 会将自身附加到 window 对象。这违背了模块化的整个概念，使您的代码依赖于全局范围内存在的对象和值。

在更复杂的环境中，以正确的顺序加载文件可能会很棘手。特别是如果某些配置文件更改了某些全局变量，并且您的脚本应该在 window.foo 设置为 "bar" 但在其他脚本将 window.foo 值更新为 "qux" 之前执行。

当我们在加载之前尝试使用 jQuery 时，我们得到一个 ReferenceError:

<!-- index.hmtl -->
<script>
    var $body = $('body'); // ReferenceError: Can't find variable: $
</script>
<script src="jquery.js">

这就是 browserify-shim 发挥作用的地方。

垫片

本质上 browserify-shim 做的是这样的事情：

// jquery-shim.js
loadScript('jquery.js') // now, window.$ contains a reference to the jQuery object
module.exports = window.$; // exports that jQuery object
window.$ = null;

现在您可以在代码中的任何地方使用 jQuery，而无需依赖它出现在全局范围内：

<!-- product-page.hmtl -->
<script> <!-- script is inlined for demo purposes only -->
    var $ = require('./jquery-shim.js');
    var $body = $('body'); // this works now
</script>

它是关于模块化您的项目并保持您的全局范围干净。

为什么这个 jquery 插件不需要 shim 就可以工作？

Why doesn't this jquery plugin need a shim in order to work?

jquery

browserify

shim

browserify-shim

jQuery

垫片