jQuery 源代码使用 Require.js，但最终文件没有? [英] jQuery source code uses Require.js, but the final file doesn't?

问题描述

未压缩的 jQuery 文件:http://code.jquery.com/jquery-2.0.3.jsjQuery 源代码:https://github.com/jquery/jquery/blob/master/src/core.js

Uncompressed jQuery file: http://code.jquery.com/jquery-2.0.3.js jQuery Source code: https://github.com/jquery/jquery/blob/master/src/core.js

他们做了什么让最终输出看起来好像没有在后台使用 Require.js?Require.js 示例告诉您将整个库插入到您的代码中，使其作为单个文件独立工作.

What are they doing to make it seem like the final output is not using Require.js under the hood? Require.js examples tells you to insert the entire library into your code to make it work standalone as a single file.

Almond.js，一个较小版本的 Require.js 也告诉你将其自身插入到你的代码中以获得一个独立的 javascript 文件.

Almond.js, a smaller version of Require.js also tell you to insert itself into your code to have a standalone javascript file.

缩小后，我不关心额外的膨胀，它只是一些额外的千字节(对于杏仁.js)，但未缩小时几乎不可读.我必须一直向下滚动，经过杏仁.js 代码才能看到我的应用程序逻辑.

When minified, I don't care for extra bloat, it's only a few extra killobytes (for almond.js), but unminified is barely readable. I have to scroll all the way down, past almond.js code to see my application logic.

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

推荐答案

简答:

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

Short answer:

You have to create your own custom build procedure.

jQuery 的构建过程之所以有效，只是因为 jQuery 根据一种模式定义其模块，该模式允许 convert 函数将源转换为不使用 define 的分布式文件.如果有人想复制 jQuery 的功能，没有捷径可走:1) 模块必须根据允许剥离 define 调用的模式进行设计，以及 2) 你必须有一个自定义转换功能.这就是 jQuery 所做的.将 jQuery 模块组合成一个文件的整个逻辑位于 build/tasks/build.js.

jQuery's build procedure works only because jQuery defines its modules according to a pattern that allows a convert function to transform the source into a distributed file that does not use define. If anyone wants to replicate what jQuery does, there's no shortcut: 1) the modules have to be designed according to a pattern which will allow stripping out the define calls, and 2) you have to have a custom conversion function. That's what jQuery does. The entire logic that combines the jQuery modules into one file is in build/tasks/build.js.

这个文件定义了一个自定义配置，它会传递给 r.js.重要的选项是:

This file defines a custom configuration that it passes to r.js. The important option are:

• out 设置为 "dist/jquery.js".这是单优化生成的文件.

• out which is set to "dist/jquery.js". This is the single file produced by the optimization.

wrap.startFile 设置为 "src/intro.js".这个文件将被添加到 dist/jquery.js.

wrap.startFile which is set to "src/intro.js". This file will be prepended to dist/jquery.js.

wrap.endFile 设置为 "src/outro.js".该文件将附加到 dist/jquery.js.

wrap.endFile which is set to "src/outro.js". This file will be appended to dist/jquery.js.

onBuildWrite 设置为 convert.这是一个自定义函数.

onBuildWrite which is set to convert. This is a custom function.

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

The convert function is called every time r.js wants to output a module into the final output file. The output of that function is what r.js writes to the final file. It does the following:

• 如果模块来自 var/ 目录，则该模块将是变换如下.让我们来看一个案例src/var/toString.js:

• If a module is from the var/ directory, the module will be transformed as follows. Let's take the case of src/var/toString.js:

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

它会变成:

var toString = class2type.toString;

否则，define(...) 调用将替换为传递给 define 的回调的内容，最后的 return 语句被剥离，对 exports 的任何赋值都被剥离.

Otherwise, the define(...) call is replace with the contents of the callback passed to define, the final return statement is stripped and any assignments to exports are stripped.

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

I've omitted details that do not specifically pertain to your question.

这篇关于jQuery 源代码使用 Require.js，但最终文件没有?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！