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文件。

当缩小时，我不关心额外的膨胀，它只是一些额外的killobytes（对于almond.js），但是没有明确的几乎没有可读性。我必须一直向下滚动，通过almond.js代码来查看我的应用程序逻辑。

问题

如何使我的代码与jQuery类似，其中最终输出看起来不像Frankenweenie？

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。这是custom function。

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

如果某个模块来自var/目录，则该模块将是。{li>

转化如下。我们来看看 src/var/toString.js：

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

它将成为：

var toString = class2type.toString;

否则，define(...)调用将替换为传递给define的回调内容，最终的return语句将被删除，并且exports的任何分配都会被删除被剥夺了。

我省略了与您的问题无关的详细信息。

Answer 2

您可以使用gfranko https://www.npmjs.org/package/amdclean名为AMDClean的工具它比jQuery做的简单得多，你可以快速设置它。

您需要做的就是创建一个非常抽象的模块（您希望向全局范围公开的模块）并在其中包含所有子模块。

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

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

问题

2 个答案:

简答：

答案很长