jQuery源代码使用Require.js，但最终文件不使用？

Question

未压缩的jQuery文件：http://code.jquery.com/jquery-2.0.3.js jQuery源代码：https://github.com/jquery/jquery/blob/master/src/core.js

他们是如何使最终输出看起来不像在底层使用Require.js的？Require.js示例告诉您将整个库插入到您的代码中，以使其作为单个文件独立运行。

Almond.js是Require.js的较小版本，也要求您将其插入到代码中，以便拥有独立的JavaScript文件。

当被压缩时，我不关心额外的膨胀，因为只有几KB（对于almond.js），但未经压缩的代码几乎无法阅读。 我必须向下滚动，经过almond.js代码才能看到我的应用逻辑。

问题

如何使我的代码与jQuery类似，最终输出的内容不会看起来像Frankenweenie一样?

- Sahat Yalkabov

Answer 1

简短回答：

你需要创建自己的自定义构建程序。

详细回答：

jQuery的构建过程之所以有效，是因为jQuery根据一种模式定义其模块，该模式允许convert函数将源代码转换为不使用define的分布式文件。如果有人想要复制jQuery的做法，就没有捷径可走：1）必须按照一种模式设计模块，以允许剥离define调用，2）必须拥有自定义转换函数。这就是jQuery所做的事情。将jQuery模块合并成一个文件的所有逻辑都在build/tasks/build.js中。

此文件定义了一个自定义配置，它将其传递给r.js。重要选项包括：

• out设置为"dist/jquery.js"。这是优化产生的单个文件。

• wrap.startFile设置为"src/intro.js"。此文件将预置到dist/jquery.js前面。

• wrap.endFile设置为"src/outro.js"。此文件将附加到dist/jquery.js后面。

• onBuildWrite设置为convert。这是一个自定义功能。

每次r.js要将模块输出到最终输出文件时，都会调用convert函数。该函数的输出是r.js写入最终文件的内容。它执行以下操作：

• 如果模块来自var/目录，则将对该模块进行以下转换。以src/var/toString.js为例：

define([
    "./class2type"
    ], function( class2type ) {
    return class2type.toString;
});

它将变成：

var toString = class2type.toString;

否则，define(...)调用将被替换为传递给define的回调函数的内容，最终的return语句将被删除，并且任何对exports的赋值也将被删除。

我省略了与您的问题无关的细节。

- Louis

---

感谢您详细的回复。 - Sahat Yalkabov

优秀的答案。谢谢@Louis - tuo

Answer 2

你可以使用一个叫做AMDClean的工具，由gfranko开发 https://www.npmjs.org/package/amdclean。它比jQuery要简单得多，而且你可以快速设置它。

你所需要做的就是创建一个非常抽象的模块（你想要暴露给全局作用域的那个），并在其中包含所有的子模块。

我最近一直在使用的另一种选择是browserify。你可以像在NodeJS中一样导出/导入你的模块，并在任何浏览器中使用它们。你需要在使用之前编译它们。它还有gulp和grunt插件来设置工作流程。为了更好的解释，请阅读browserify.org上的文档。

- Iman Mohamadi