在 RequireJS 中 - 无法在路径中为 jQuery 名称添加别名

发布于 2024-12-25 08:17:12 字数 2118 浏览 2 评论 0原文

我是一个 RequireJS 菜鸟。当我使用“require.config”并包含名称与 jQuery 不同的 jQuery 路径时，结果不符合预期。

这是一个非常简单的示例，可以帮助解释我的问题。

文件结构

root
├── Index.htm
└── scripts
    ├── libs
    │   ├── jquery-1.7.1.js
    │   └── require.js
    ├── main.js
    └── someModule.js

index.htm

<html>
<head>
    <title>BackboneJS Modular app with RequireJS</title>
    <script data-main="scripts/main" src="scripts/libs/require.js"></script>
</head>
<body>
    <h3>BackboneJS is awesome</h3>
</body>
</html>

这里的脚本标签引用需要在脚本/库中。当 require 运行时，脚本目录中名为 main.js 的 JavaScript 文件应该被执行。

main.js

require.config({
   "paths": {
           "mod1": "someModule"
   }
});
require(["mod1"], function (sm) {
    console.log(sm.someValue);
});

根据我的经验，“mod1”可以是任何内容，只要它在 require.config 路径和 require 方法中引用相同即可。

someModule.js

define([], function () {
    console.log();
    return { someValue: "abcd" };
});

只是为了完整起见，我包含了 someModule.js

当我包含 JQuery 时，会出现明显的不一致情况。

在下面的 main.js 中，我将 jQuery 添加到配置和 require 方法中。

Main.js

require.config({
    "paths": {
        "jquery": "libs/jquery-1.7.1"
        ,"mod1": "someModule"
    }
});

require(["mod1", "jquery"], function (sm, $) {
    console.log(sm.someValue);
    console.log($);
});

通过添加 jQuery，一切似乎仍然有效。 “console.log($)”写入 jQuery 函数。

现在是踢球者。在下面的代码中，我将两个路径中的“jquery”更改为“jqueryA”，并要求

require.config({
    "paths": {
        "jqueryA": "libs/jquery-1.7.1"
        ,"mod1": "someModule"
    }
});

require(["mod1", "jqueryA"], function (sm, $) {
    console.log(sm.someValue);
    console.log($);
});

现在“console.log($)”写入 null。

这是应该预料到的吗？有没有理由为什么名称必须是 jquery，但对于 mod1 来说它可以是任何东西？

我可以毫无问题地解决这个问题，但这个问题看起来很奇怪。我知道我可以使用组合的 RequireJS 和 jQuery 文件，但是当 jQuery 有更新时，我不想依赖 RequireJS 来包含新的 jQuery。

原文

I'm a RequireJS noob. When I use "require.config" and include a path to jQuery with a name different than jQuery, results are not as expected.

Here's a very simple example to help explain my issue.

Structure of files

root
├── Index.htm
└── scripts
    ├── libs
    │   ├── jquery-1.7.1.js
    │   └── require.js
    ├── main.js
    └── someModule.js

index.htm

<html>
<head>
    <title>BackboneJS Modular app with RequireJS</title>
    <script data-main="scripts/main" src="scripts/libs/require.js"></script>
</head>
<body>
    <h3>BackboneJS is awesome</h3>
</body>
</html>

Here the script tag references require in scripts/libs. When require gets ran the JavaScript file called main.js in the scripts directory should be executed.

main.js

require.config({
   "paths": {
           "mod1": "someModule"
   }
});
require(["mod1"], function (sm) {
    console.log(sm.someValue);
});

In my experience the "mod1" can be anything as long as it's referenced the same in the require.config path and in the require method.

someModule.js

define([], function () {
    console.log();
    return { someValue: "abcd" };
});

Just for completeness I included someModule.js

The perceived inconstancy occurs when I include JQuery.

In the following main.js I added jQuery to the config and the require method.

Main.js

require.config({
    "paths": {
        "jquery": "libs/jquery-1.7.1"
        ,"mod1": "someModule"
    }
});

require(["mod1", "jquery"], function (sm, $) {
    console.log(sm.someValue);
    console.log($);
});

With the additional of jQuery everything seems to still works. The "console.log($)" writes the jQuery function.

Now the kicker. In the following code I change "jquery" to "jqueryA" in both the paths and require

require.config({
    "paths": {
        "jqueryA": "libs/jquery-1.7.1"
        ,"mod1": "someModule"
    }
});

require(["mod1", "jqueryA"], function (sm, $) {
    console.log(sm.someValue);
    console.log($);
});

Now "console.log($)" writes null.

Should this be expected? Is there a reason why the name must be jquery, but for mod1 it can be anything?

I can work-around this without a problem, but this issue seems odd. I know I can use the combined RequireJS and jQuery file, but when jQuery has an update I don't want to be dependent on RequireJS to include the new jQuery.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我很OK 2025-01-01 08:17:12

在 jQuery 1.7 中，他们决定支持 AMD 加载。为此，它定义了一个名为“jquery”的模块，该模块传回对 jQuery 对象的引用。当您使用其他名称（例如“jqueryA”）定义 jquery 的路径时，事情并不完全像您想象的那样。

jquery 脚本始终将自身定义为名为“jquery”的模块，该模块已通过应用程序的 require 注册。当您将路径快捷方式命名为“jquery”并且“jquery”作为依赖项加载时，require 实际上引用了 jquery-1.7.1.js 定义的“jquery”模块，该模块确实传回了正确的引用。当您将模块快捷方式命名为 jqueryA 时，您现在引用的是未定义的引用，因为 jquery 脚本本身不会传回引用，除非通过名为“jquery”的模块。我知道这很愚蠢。

jquery 脚本将该模块定义为“jquery”，并希望您将其简单地引用为“jquery”。如果您想将其引用为另一个名称（并且作为奖励，防止它与其他加载的 jquery 库发生冲突），请使用此方法：

使用 requirejs 和 jquery，而不破坏全局 jquery？

回复收藏 0 原文

风和你 2025-01-01 08:17:12

这是我的解决方法，基于我读到的 Require.JS 2.1.0 的实现：

define.amd.jQuery = false;

require.config({
    ...

    shim: {
        "jQuery-1.8.2": {
            exports: "jQuery"
        }
    }

    ...
});

Here's my workaround, based on the implementation I read of Require.JS 2.1.0:

define.amd.jQuery = false;

require.config({
    ...

    shim: {
        "jQuery-1.8.2": {
            exports: "jQuery"
        }
    }

    ...
});

回复收藏 0 原文

何时共饮酒 2025-01-01 08:17:12

我相信我找到了问题的答案。

可以选择调用 AMD Define() 来注册模块
https://github.com/documentcloud/underscore/pull/338#issuecomment-3253751

这是上一个链接的引用。尽管它与下划线有关，但我相信它也与 JQuery 有关。

所有 AMD 加载器都允许将模块 ID 映射到部分
路径，通常配置称为“路径”，所以要做你的
想要：
requirejs.config({
路径：
下划线：'js/libs/underscore-1.2.3.min'
} }); require(['下划线'], function () {});由于下划线被其他更高级别的模块使用，例如骨干，这是一个常见的依赖项
名称需要用于传达对的共同依赖
下划线，将这种依赖关系称为“下划线”是有意义的。
路径配置提供了一种映射到您的特定 URL 的方法
想要用于该依赖项。

这里的咆哮很好地描述了 AMD 和命名模块的问题。

具有命名定义的 AMD 模块。这么多的痛苦，换来的是什么？
http://dvdotsenko.blogspot.com /2011/12/amd-modules-with-named-defines-so-much.html

引用上面的链接

如果正确使用模块的唯一方法是强制
最终开发人员将其名称再次硬编码到配置文件中，位于
消费点，（仅在这方面）为什么要浪费时间、精力和
首先对模块中的名称进行硬编码（更不用说导致
对于那些确实需要在不同的环境下加载模块的开发人员来说是悲痛的
名称/来自其他来源）？

在这篇文章中，James Burk 建议不要使用名称模块。
https://github.com/jrburke/requirejs/wiki/Updating -现有库#wiki-anon

通常你不应该注册命名模块，而是注册
作为匿名模块：
这允许您的代码的用户重命名
为您的图书馆取一个适合其项目布局的名称。它还
允许他们将您的模块映射到使用的依赖项名称
其他图书馆。例如，Zepto.js 可以映射来满足
“jquery”模块 ID 的模块职责。
有一些值得注意的例外确实注册为命名模块：
•jQuery•下划线

异常糟糕。例外让菜鸟变得很困难。

I believe I found the answer to my issue.

Optionally call AMD define() to register module
https://github.com/documentcloud/underscore/pull/338#issuecomment-3253751

Here's a quote from the previous link. Even though it pertains to underscore, I believe it relates to JQuery also.

all AMD loaders allow mapping a module ID to a partial
path, usually the configuration is called 'paths', so to do what you
want:
requirejs.config({
paths:
underscore: 'js/libs/underscore-1.2.3.min'
} }); require(['underscore'], function () {}); Since underscore is used by other higher-level modules, like backbone, a common dependency
name needs to be used to communicate a common dependency on
underscore, and it makes sense to call that dependency 'underscore'.
The paths config gives a way to do the mapping to a specific URL you
want to use for that dependency.

Here's a rant that does a very good job of describing the issues with AMD and named modules.

AMD modules with named defines. So much pain for what gain?
http://dvdotsenko.blogspot.com/2011/12/amd-modules-with-named-defines-so-much.html

Quote from the link above

If the only way to consume the module properly is to force the
end-developer to hard-code its name again in a config file, at the
consumption point, (in that respect only) why waste time, effort and
hard-code the name in the module in the first place (let alone cause
grief to those devs who DO need to load the module under different
name / from alternate sources)?

In this post James Burk recommends not using name module.
https://github.com/jrburke/requirejs/wiki/Updating-existing-libraries#wiki-anon

Normally you should not register a named module, but instead register
as an anonymous module:
This allows users of your code to rename
your library to a name suitable for their project layout. It also
allows them to map your module to a dependency name that is used by
other libraries. For instance, Zepto.js can be mapped to fulfill the
module duty for the 'jquery' module ID.
There are some notable exceptions that do register as named modules:
•jQuery •underscore

Exception suck. Exceptions makes it difficult for noobs.

回复收藏 0 原文

~没有更多了~