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

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

简短回答:

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

答案很长

jQuery的构建过程只是因为jQuery根据允许convert函数将源转换为不使用define的分布式文件的模式定义其模块。 如果有人想要复制jQuery所做的事情,那就没有捷径:1)模块必须根据允许剥离define调用的模式进行设计,2)你必须有自定义转换函数。 这就是jQuery的function。 将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 。 这是一个自定义function 。

每次r.js想要将模块输出到最终输出文件时, 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任何赋值。

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

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

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

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