需要 JS - r.js 优化 - 如何正确执行此操作？

Question

我正在尝试将我的 Require JS 项目优化为单个文件。 我浏览了多个教程，但似乎没有一个可以正常工作。

我有以下文件结构：

scripts/
    build/
        r.js
        build.js
    common/
        misc.js
        slider.js
    library/
        jquery.min.js
        jquery.colorbox.min.js
        jquery.scrollTo.min.js
        ...
    mobile/
        app.js
        catalogue.js
        car-images.js
        ...
    web/
        app.js
        catalogue.js
        car-images.js
        ...
index.html

我需要创建 2 个文件 web.app.js 和 mobile.app.js。 经过多次尝试，我只设法缩小每个文件夹中的app.js，但没有它的依赖关系。

结果应该是一个文件，包含common、library和web/mobile目录的所有内容，这取决于我尝试编译哪个app.js。

app.js 的外观如下（web 和 mobile 相似）：

requirejs.config({
    "paths": {
        'jquery': [
            '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min',
            '../library/jquery.min'
        ],
        'colorbox': [
            '//cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox-min',
            '../library/jquery.colorbox-min'
        ],
        'colorbox-he': [
            '//cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/i18n/jquery.colorbox-he.min',
            '../library/jquery.colorbox-he.min'
        ],
        'scrollTo': [
            '//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.1/jquery.scrollTo.min',
            '../library/jquery.scrollTo.min'
        ],
        'misc': '../common/misc',
        'slider': '../common/slider'
    },
    "map": {
        '*': {
            'colorbox': 'colorbox-he'
        },

        'colorbox-he': {
            'colorbox': 'colorbox'
        }
    },
    "shim": {
        'scrollTo': {
            'deps': ['jquery'],
            'exports': 'jQuery.fn.scrollTo'
        },
        'colorbox': {
            'deps': ['jquery'],
            'exports': 'jQuery.fn.colorbox'
        },
        'colorbox-he': ['colorbox'],
        'misc': ['jquery', 'scrollTo'],
        'car-images': ['jquery', 'colorbox'],
    }
});

if (typeof require_modules == 'object') {
    require_modules.push('misc')
} else {
    var require_modules = ['misc']
}

require(require_modules);

这里是使用的配置：

({
    baseUrl: "../web",
    name: "app",
    out: "app-built.js"
})

知道如何做到这一点吗？由于多个文件和请求，加载时间很长。

提前致谢！

Answer 1

正如 Louis 所说，您的主要问题在于您的 if 声明。

虽然有很多选项可供您选择，但我会使用 2 个构建脚本来解决此问题，这些脚本指向 2 个配置文件（您的应用程序文件），例如编译 web.app.js：

scripts/web/build.js：

({
  mainConfigFile: 'app.js',
  optimize: 'uglify2',
  name: 'path/to/require.js', /* relative to where you run r.js */
  include: ['app'],
  insertRequire: ['app'],
  out: '../web.app.js',
  wrap: true
})

全局安装 r.js，然后从 scripts/web/ 运行以下命令：

r.js -o build.js

注意：以上只会编译require、misc及其依赖scrollTo & jQuery

Answer 2

主要问题是您要求r.js 处理此问题：

if (typeof require_modules == 'object') {
    require_modules.push('misc')
} else {
    var require_modules = ['misc']
}

require(require_modules);

它不能。 documentation 很清楚：

优化器只会组合在传递给顶级 require 和 define 调用的字符串文本数组中指定的模块，或者在简化的 CommonJS 包装中组合 require('name') 字符串文本调用。因此，它不会找到通过变量名加载的模块：

var mods = someCondition ? ['a', 'b'] : ['c', 'd'];
require(mods);

但是如果这样指定，'a' 和 'b' 将被包括在内：

require(['a', 'b']);

不幸的是，r.js 只是忽略了对不包含字符串数组的require 的调用。您不会收到任何警告。

要解决这个问题，您可以为每个要创建的捆绑包创建一个 r.js 构建配置，并对要包含的模块进行硬编码。更复杂的解决方案是使用 esprima 之类的东西来分析您的代码并为每个包生成构建配置。或者您可以编写一个功能不如 esprima 的脚本，但能够从根据您决定的约定编写的文件中提取所需的模块名称。这在很大程度上取决于您的应用程序的结构。

您的配置的其他问题...您必须在构建配置中使用mainConfigFile，或者将运行时配置中的值（如shim）复制到构建配置中。我会使用mainConfigFile。如果您曾经使用过不在顶级范围内的require 调用，则还必须使用findNestedDependencies。你可能还想要removeCombined。