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 方式导出/导入模块并在任何浏览器中使用它们。您需要在使用之前编译它们。它还具有用于设置工作流的gulpgrunt插件。要获得更好的解释,请阅读browserify.org上的文档。

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