使用带有RequireJS的私有jquery-优化后发布

Using private jquery with RequireJS - issue after optimisation

本文关键字：优化 jquery- RequireJS      更新时间：2023-09-26

我正在使用requireJS和jQuery的CDN版本（现在是推荐的方法）构建一个框架，在优化代码时遇到了一些问题。输出是按名称命名的，我指定每个模块都使用文档中概述的jquery的私有版本：

require.config({
    // Add this map config in addition to any baseUrl or
    // paths config you may already have in the project.
    map: {
      // '*' means all modules will get 'jquery-private'
      // for their 'jquery' dependency.
      '*': { 'jquery': 'jquery-private' },
      // 'jquery-private' wants the real jQuery module
      // though. If this line was not here, there would
      // be an unresolvable cyclic dependency.
      'jquery-private': { 'jquery': 'jquery' }
    }
});
// and the 'jquery-private' module, in the
// jquery-private.js file:
define(['jquery'], function (jq) {
    return jq.noConflict( true );
});

优化后我看到的问题是"jquery private.js"文件中没有定义"jq"。

有什么想法吗？我试过设置jq=$，但这似乎会破坏全局。

谢谢。

以下是我为获得jQuery CDN&优化示例链接自RequireJS jQuery Instructions页面，以使用粘贴在原始问题中的映射模块使用noConflict部分。

1-分叉样品

2-创建了包含此内容的文件www/js/lib/jquery-private.js

define(['jquery'], function (jq) {
    return jq.noConflict( true );
});

3-修改了www/js/app.js以粘贴map部分，因此require.config现在看起来像这样：

requirejs.config({
    "baseUrl": "js/lib",
    "paths": {
      "app": "../app",
      "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min"
    },
    map: {
      '*': { 'jquery': 'jquery-private' },
      'jquery-private': { 'jquery': 'jquery' }
    }    
});

4-修改www/js/app/main.js使用jqlocal而不是$（只是为了向自己证明它不是全局jQuery:

define(["jquery", "jquery.alpha", "jquery.beta"], function(jqlocal) {
    jqlocal(function() {
        jqlocal('body').alpha().beta();
    });
});

5-更改为tools文件夹并运行：

node r.js -o build.js

6-更改为创建并运行servedir的www-build文件夹（什么web服务器并不重要，但这是我用于开发的）

7-浏览到本地地址&应用程序的端口号（在我的例子中是http://localhost:8000/app.html）和锯：

阿尔法是Go！

Beta是Go！

您可以在此处看到最终结果

为了实现这一点，我改变了使用Require的方式（可能是我一直应该做的方式）。这些信息可能对其他人有用，所以我想我应该把它放在那里。

以前我在定义的模块中指定任何依赖项：

define( [ "dep1", "dep2", "jquery" ], function( var1, var2, jq ) {

这在最初运行良好，但在优化时失败了。我将依赖关系移到了包含该模块的require函数调用中，然后它在优化前和优化后都开始正常工作，jquery被私人使用：

require( [ 'jquery', 'dep1', 'dep2' ], function( jq, var1, var2 ) {
    formValidator.formValidationInit( jq( el ) );
});

我没想到这会有什么不同，但看起来也一样。

同样值得注意的是，我不得不更改jquery私有文件，因为它仍然会引发一个关于"jq"未定义的问题。我现在将jq设置为等于全局$，并将其返回，以便可以临时使用：

define(['jquery'], function () {
    var jq = $;
    return jq.noConflict( true );
});
相关文章：