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上的文档。