RequireJS 中本地需求和全局需求的区别

Posted 2023-02-24

【中文标题】RequireJS 中本地需求和全局需求的区别

【英文标题】：Difference between local and global require in RequireJS

【发布时间】：2015-09-06 03:00:18

【问题描述】：

使用RequireJS，我不相信我完全理解“require”的以下两种不同用法之间的区别。在这种情况下，我只谈论浏览器，而不是 node.js。我的一个问题是：我可以在前端使用 RequireJS 同步需要某些依赖项吗？

首先是这样的：

    define(function()

         //below the require is definitely the global require of RequireJS, also aliased as requirejs.

         require(['module'],function(mod)  
          //mod is loaded here only
            

      );

然后是这样的：

   define(['require'],function(require)

      require(['dep'],function(dep)  //require is local not global
           //dep is loaded here only
         

     //now the require subsequently called is the 'local' require
     var dep = require('dependency'); //I doubt this is possible on front-end..or is it?

     );

我想我看不到使用 require 作为参数在前端定义的目的，但是有吗？

我的困惑是因为这里的这个例子：

http://requirejs.org/docs/api.html

define() 中的相对模块名称： For require("./relative/name") 可能在 define() 函数调用中发生的调用，请务必询问 将“require”作为依赖项，以便解析相对名称 正确：

define(["require", "./relative/name"], function(require) 
    var mod = require("./relative/name");
);

从上面我只能猜测，如果一个模块相对于另一个模块，你可以在前端使用 RequireJS 对其他模块进行同步调用？

同样，这个例子：

生成相对于模块的 URL：您可能需要生成一个 URL 是相对于模块的。为此，要求将“require”作为依赖项 然后使用 require.toUrl() 生成 URL：

define(["require"], function(require) 
    var cssUrl = require.toUrl("./style.css");
);

所以，我的问题是：本地需求和全局需求有什么区别？看起来本地 require 显然不是仅/主要用于 CommonJS 模块。

【参考方案1】：

所有这些示例都使用异步模块加载，而不是同步。您正在查看的代码有点令人困惑，因为它似乎是同步的，但实际上并非如此。

在这个例子中：

define(["require", "./relative/name"], function(require) 
    var mod = require("./relative/name");
);

异步是显式的。因为模块 id './relative/name' 在依赖数组中，所以在（异步）加载之前不会调用该函数。然后 require 调用将立即返回它已经（异步）加载的模块。

在另一种支持的语法中，异步是隐藏的：

define(function(require) 
    var mod = require("./relative/name");
);

但即使这样也是异步的。 Requirejs rewrites 这个代码包含一个依赖数组，就像上面的一样。所以异步就是你得到的所有东西，尽管有外表。

为什么这是有用的和不同的？因为将数组的十几个成员与函数中将它们转换为变量的相应位置进行匹配可能具有挑战性。考虑一下文档中的这个例子：

define([ "require", "jquery", "blade/object", "blade/fn", "rdapi",
         "oauth", "blade/jig", "blade/url", "dispatch", "accounts",
         "storage", "services", "widgets/AccountPanel", "widgets/TabButton",
         "widgets/AddAccount", "less", "osTheme", "jquery-ui-1.8.7.min",
         "jquery.textOverflow"],
function (require,   $,        object,         fn,         rdapi,
          oauth,   jig,         url,         dispatch,   accounts,
          storage,   services,   AccountPanel,           TabButton,
          AddAccount,           less,   osTheme) 

);

另一个有用且不同的原因是本地要求允许您正确解析相对模块路径。这使您可以定义一堆相对于彼此的模块，而无需明确指定它们所在的目录，如果该目录可能发生变化，这很方便。

【讨论】：

这是一个很好的信息，谢谢 Lyn，虽然要补充一点——从技术上讲，你所说的并不总是正确的——如果一个模块已经加载，即使语法是异步的，它也会同步加载而不是异步加载（隐式依赖数组被重写）样式。这有意义吗？