Javascript 理解requirejs路径

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10895094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 03:28:41  来源:igfitidea点击:

understanding requirejs paths

javascriptjqueryrequirejs

提问by Hans Skov

Using requirejs my main.js looks like this

使用 requirejs 我的 main.js 看起来像这样

requirejs.config({
    baseUrl: '/javascript/',
    paths: {
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
        async: 'requirePlugins/async',
            hbs: 'hbs'
    },
    waitSeconds: 7
});
define(['common'], function () {
    loadFonts();
});

The main.js is included in the page with a script call

main.js 包含在带有脚本调用的页面中

<script data-main="/javascript/main.js" src="/javascript/require-2.0.1.js"></script>

Common is the basic function for the website, jquery doc ready function etc. wrapped in a define call:

Common 是网站的基本功能,jquery doc ready 功能等,封装在一个定义调用中:

define(['jquery'], function() {
    //jQuery dependant common code
});

This works fine, jQuery is loaded from the google CDN and the code is executed. But when i add a require call after the load of main.js

这工作正常,jQuery 从谷歌 CDN 加载并执行代码。但是当我在加载 main.js 后添加一个 require 调用时

<script data-main="/javascript/main.js" src="/javascript/require-2.0.1.js"></script>
require(['jquery'], function ($) {
    //code
});

jquery is requested from /javascript/jquery.js instead of the defined path to the google cdn. I'm still a rookie at requirejs but it would seem to me that the path should be defined before any of the other requests are fired, can somebody please help me understand what I'm doing wrong?

从 /javascript/jquery.js 请求 jquery 而不是谷歌 CDN 的定义路径。我仍然是 requirejs 的新手,但在我看来,应该在触发任何其他请求之前定义路径,有人可以帮助我理解我做错了什么吗?

回答by ken

I think this could be due to using the data-mainattribute on the RequireJS script tag; for that to be parsed, RequireJS itself has to load and parse. In my testing (specifically for IE9), the browser would download and execute any script tags directly following the RequireJS script tag before parsing the RequireJS config file (the one specified by the data-mainattribute).

我认为这可能是由于使用data-main了 RequireJS 脚本标签上的属性;为了解析它,RequireJS 本身必须加载和解析。在我的测试中(特别是针对 IE9),浏览器会在解析 RequireJS 配置文件(由data-main属性指定的文件)之前直接下载并执行 RequireJS 脚本标签之后的任何脚本标签。

To get around this, I simply quit using the data-mainattribute and instead placed the config file as a normal script tag directly after the RequireJS script tag, and everything seems to be happy now.

为了解决这个问题,我简单地停止使用该data-main属性,而是将配置文件作为普通脚本标签直接放在 RequireJS 脚本标签之后,现在一切似乎都很愉快。

Specifically, this is what it looks like (using your sample):

具体来说,这就是它的样子(使用您的示例):

<script src="/javascript/require-2.0.1.js"></script>
<script src="/javascript/main.js"></script>

回答by Chris Li

Maybe you put the config statement before require js being loaded.

也许您在加载 require js 之前放置了 config 语句。

You should load require.js first, put your config code after, then call require(['jquery'], ...);

你应该先加载 require.js,然后把你的配置代码放在后面,然后调用 require(['jquery'], ...);

The reason it searches /javascript/ is because your require.js file is located there and it is the default base url.

它搜索 /javascript/ 的原因是因为您的 require.js 文件位于那里并且它是默认的基本 url。

Your config may never be used by require.js.

你的配置可能永远不会被 require.js 使用。

See this tutorialabout require config.

请参阅有关需要配置的教程

回答by Sergey

You have to rename define to require

您必须重命名定义以要求

require(['common'], function () {
    loadFonts();
});

回答by Ben Mosher

I'd recommend using mapinstead of pathsto configure specific module locations.

我建议使用map而不是paths配置特定的模块位置。

pathsis intended more for shortcuts/prefixs to simplify/configure includes, rather than full module paths.

paths更多地用于简化/配置包含的快捷方式/前缀,而不是完整的模块路径。

Bear in mind: you'll need to place mappings you want to apply globally under an asterisk (*) key in the mapobject.

请记住:您需要将要全局应用的映射放置*map对象中的星号 ( ) 键下。

回答by Arashsoft

The reason is you put require(['jquery']...immediately after loading require.js module. As the result, it tries to load ['jquery']before reading your config settings.

原因是你require(['jquery']...在加载 require.js 模块后立即放置。因此,它会['jquery']在读取您的配置设置之前尝试加载。

And why it tries to find jquery in /javascript/jquery.js? that is because of your data-mainattribute.

为什么它试图在 中找到 jquery /javascript/jquery.js?那是因为你的data-main属性。

RequireJS loads all code relative to a baseUrl. The baseUrl is normally set to the same directory as the script used in a data-main attribute for the top level script to load for a page.

RequireJS 加载与 baseUrl 相关的所有代码。baseUrl 通常设置为与用于为页面加载的顶级脚本的 data-main 属性中使用的脚本相同的目录。

This link clarifies require.js module loading procedure: http://requirejs.org/docs/api.html#jsfiles

此链接阐明了 require.js 模块加载过程:http://requirejs.org/docs/api.html#jsfiles

回答by HungryCoder

i think you can embed the full url in the require block. like:

我认为您可以在 require 块中嵌入完整的 url。喜欢:

require(['http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'], function ($) {
   //code
});

btw, your jquery link is invalid.

顺便说一句,您的 jquery 链接无效。