RrequireJS优化器并在优化后加载动态路径

Question

我的requirejs任务艰巨，正在运行优化程序。

我加载了很多外部文件，这些文件在运行时并不总是需要的，通常我只需要几个核心文件。 然后根据用户的决定，我会在运行时加载某些文件。

例如：

define(["backbone",     'text!data/filePaths.json'],
    function(Backbone,   filePaths) {
        'use strict';

        return Backbone.Model.extend({

            initialize: function(){
                // parse the file paths, there could be a hundred here
                this.filePaths = JSON.parse(filePaths);
            },

            // dynamically add a file via this function call
            addFile: function(id){
                var self = this;

                return new Promise(function(resolve, reject){     

                    // load files dynamically based on the id passed in
                    require([self.filePaths[id].path], function(View){
                        resolve(new View());
                    });


                });
            }

        });

    }

);

json的文件路径可能如下所示：

"ONE": {
    "name": "BlueBox",
    "path": "views/box/Blue"
},
"TWO": {
    "name": "RedBox",
    "path": "views/box/Red"
},
etc...

问题是这不适用于我的优化程序。

当我使用优化文件运行应用程序时，我得到：

Uncaught Error: undefined missing views/box/Red

更新：

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    requirejs: {
        desktopJS: {
            options: {
                baseUrl: "public/js/app",
                wrap: true,
                // Cannot use almond since it does not currently appear to support requireJS's config-map
                name: "../libs/almond",
                preserveLicenseComments: false,
                optimize: "uglify2",
                uglify2: {
                    // mangle: false,
                    // no_mangle: true,
                    // stats: true,
                    // "mangle-props": false,
                    "max-line-len": 1000,
                    max_line_length: 1000
                },
                uglify: {
                    mangle: false,
                    no_mangle: true,
                    stats: true,
                    "mangle-props": false,
                    max_line_length: 1000,
                    beautify: true
                },
                mainConfigFile: "public/js/app/config/config.js",
                include: ["init/DesktopInit"],
                out: "public/js/app/init/DesktopInit.min.js"
            }
        },
        desktopCSS: {
            options: {
                optimizeCss: "standard",
                cssIn: "./public/css/desktop.css",
                out: "./public/css/desktop.min.css"
            }
        }
    },

注意：如果我使用未优化的版本，则一切正常。

Answer 1

对于不具有依赖关系（作为字符串文字数组）的require调用，优化器无法跟踪依赖关系。 您的调用是优化程序无法处理的require调用的示例，因为依赖项列表是在运行时计算的：

require([self.filePaths[id].path], function(View){

原因很简单：优化器在优化模块时不会评估您的模块。 无论如何， self.filePaths[id].path的可能值的数量可能是无限的，因此优化器无法处理所有情况。 因此，当优化器优化您的代码时，应通过此require调用加载的模块不包括在捆绑软件中。 您已经在自己的答案中涉及到的一种解决方案是使用include 包括所有可能由require调用加载的模块。

如您所指出的，如果您可以有数百个模块，则意味着将它们全部包含在优化器生成的捆绑软件中。 还有其他选择吗？ 就在这里。

您可以生成仅包含应用程序其他模块的捆绑软件，并保留要通过上面的require调用加载的模块，而不是作为捆绑软件的一部分单独加载。 嗯，但是您在问题中显示的特定配置存在问题。 您有评论说您不能使用杏仁。 然而，实际上您确实在下一行使用它。 （而且您的答案中也有它。）问题在于Almond的限制之一是它不进行动态加载。 那是限制列表中的第一个限制 。 为此，您必须使用功能齐全的AMD加载程序，例如RequireJS本身。

Answer 2

这不是真正的答案，只是“解决”我的应用程序无法正常工作的一种方式。

我相信我唯一可以解决这个问题的方法就是包含配置

例如：

requirejs: {
    desktopJS: {
        options: {
            baseUrl: "public/js/app",
            wrap: true,
            name: "../libs/almond",
            optimize: "uglify2",
            uglify2: {
                "max-line-len": 1000,
                max_line_length: 1000
            },
            mainConfigFile: "public/js/app/config/config.js",
            include: ["init/DesktopInit", "views/box/Blue"], // include the file here, all of a sudden the error goes away for that file.

尽管当我有一百个文件时，这变得很麻烦。 我不想用包括所有我的文件来构建整个东西，我想要一组优化的文件，以及一堆动态需要的其他文件。