javascript - r.js 到底做了什么？

Question

我正在尝试了解流行的 r.js 的好处.

好像...

• 连接手动选择 JavaScript 文件的列表
• 丑化/最小化组合代码
• 对 CSS 文件做一些类似的事情(合并它们)

此外，(它与通用组合/缩小工具的不同之处)它似乎...

• 将 Node 风格的 require() 模块转换为 AMD 风格的模块
• 命名匿名模块(例如。define(['dependency'], function(){...})
• 为加载器插件提供一些支持，例如内联 CSS 文件

它确实不似乎...

• 分析并自动解析在文件中找到的依赖项(例如，将文件 foo.js 包含到包中只是因为 r.js 找到了 define(["foo"], ... )

这是正确的，还是我遗漏了什么？

Answer 1

你错了，因为 r.js 会自动解析依赖关系。如果你有一个包含以下内容的 main.js 文件:

define(["foo"], function (foo) {
});

然后，如果您要求 r.js 从 main.js 中创建一个优化的模块，它将包含模块的代码foo 进入构建。

一些注意事项:

1. 可以告诉 r.js 排除模块。因此，如果您认为应该在优化包中的模块不存在，则可能是它已被排除在外。 (你知道你是如何使用 r.js 但如果你使用由 其他人 生成的包并且你想知道，那么这可能就是答案:他们明确排除了依赖来自构建。)

2. r.js 不会找到嵌套 依赖项，除非您告诉它这样做。例如:

   define(function () {
       require(["foo"], function (foo) {
       });
   });
   

   r.js 不会发现 foo 是必需的，除非您将 findNestedDepencencies 设置为 true构建配置。

3. r.js 只能找到以字符串列表形式指定的依赖项，这些字符串作为文字放置在 require 和 define 调用需要依赖项。所以如果你这样做:

   define(function () {
       var deps = ["foo"];
       require(deps, function (foo) {
       });
   });
   

   那么 r.js 将不知道 foo 是一个依赖项，因为在 require(deps, ... 中你的依赖项出现了作为符号引用，而不是字符串列表。您必须在构建配置中手动将 foo 指定为依赖项。没有标志可以打开来制作 r.js 找到这些情况。