如何将我自己的jQuery版本与浏览器化模块一起使用

Question

（我应该事先澄清一下：我的问题是关于Java语言中的闭包和客户端模块模式的。不是关于如何使用jQuery.noConflict（）的。）

我有一些人们可以添加到其网站的Javascript。 我希望自己的代码可以访问$变量，该变量解析为特定版本的jQuery，而该版本与页面加载的内容无关。 如果我所有的代码都在我定义的闭包中的单个文件中，则这很容易。 但是我正在努力寻找一种干净的方法来使用模块模式来实现此目的，其中我的代码位于单独的闭包中。

背景 （即不是问题的显而易见的事物）

当我所有的代码都放在一个文件中时，这很容易。 我可以在最外层的闭包中创建一个$ var并使用$ .noConflict（...）来确保外页保留自己的jQuery版本。 像这样：

// This is easy and works as you'd expect
(function() {

    var $; // The $ var in my local scope that the rest of my code can use.

    function loadMyVersionOfjQuery() {
        insertTheAppropriateScriptTagAndWaitForTheScriptToLoad(function() {
            // Set the $ in my local scope and restore the global jQuery.
            $ = jQuery.noConflict(true);
        }
    }

    loadMyVersionOfjQuery();

    ... etc. ...
})();

现在，我正在使用browserify将代码分解为单独的文件，这不再那么容易了。 最麻烦的是我的jQuery版本是异步加载的事实。 因此，在处理我的模块require（）时，我的jQuery版本尚未就绪。 这使我无法在模块闭包的顶层简单地创建和分配$ var。

我研究过的一些想法

1. 如果我可以将模块的初始化推迟到运行jQuery之后，那么我的每个模块都可以定义自己的$ var。 但这似乎不可能。 即使我试图将它们隐藏在函数回调中（browserify似乎实际上解析JS来查找require语句），也似乎遍历了我的require（...）调用。
2. 如果可以定义一个动态代理对象，则可以使用一个代理初始化我自己的$ vars，该代理以后将委托给我加载的jQuery版本。 但是Javascript不支持动态代理模式。
3. Browserify实际上定义了一个闭包，当我的所有模块“转译”为单个文件时，它们将包装它们。 如果我能以某种方式为它插入此闭包中的代码片段（简称为“ var $;”），那我就做生意了。 但是我还没有找到任何方法可以做到这一点。
4. 作为最后的选择，我想到可以在browserify输出周围创建自己的闭包，并在那里定义所需的作用域变量。 通过处理输出文件或通过围绕浏览器内容的几个简单文件的混合（例如“（function（）{var $;” + bundle.js +“}）（）;”之类。）。太hacky了。

有人有什么想法吗？ 如何在多个文件中开发客户端Javascript模块，但仍然在一起关闭所有代码？

Answer 1

可能是我是唯一遇到这种情况的人（Browserify +我想在所有模块中使用的异步加载的库），但是我将分享我仅在以下情况中提出的解决方法案件...

我最终定义了一个模块，该模块异步加载jQuery，然后在就绪时通知侦听器。 基本上，它是对异步“需求”的非常简单的支持。 我所有想使用jQuery的模块都以一小段样板代码结束，如下所示：

var $; require('./jquery-provider').onLoad(function(jQuery) { $=jQuery; });

它并不完美，但很简单。 它之所以有效，是因为我的库的入口点启动了我的“ jQuery提供程序”，并在调用其他所有模块之前等待就绪的回调。 因此，尽管我的所有模块在解决所有依赖关系时都被Browserify积极执行，但是在我所需的库可用并传递给它们之前，模块中的所有功能都无法运行。

（如果此模式对其他人有用，则可以共享更多代码。）

Answer 2

在我的app.js中，我有这个

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

然后使用从npm“ plugin”下载并导入de module并执行，就像这样。

var plugin    = require('plugin');
plugin();

并且工作正常。