8

未压缩的 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？

4

2 回答 2

16

简短的回答：

您必须创建自己的自定义构建过程。

长答案

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都被剥离。

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

于 2013-11-10T14:09:26.230 回答
6

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

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

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

于 2014-05-26T07:13:33.113 回答