Javascript RequireJS仅加载连接的文件

我正在使用RequireJS（版本2.1.14），并希望将我的JavaScript文件连接到一个

app build.js

。 我创建了一个小节点模块，它读取我的

app.js

，提取项目路径，并在我运行应用程序的

js

目录中的

node build

后执行

节点模块（build.js）：

app.js：

var paths = {
    'jquery': 'vendor/jquery-1.11.0.min',
    // other paths
};

// Set language, necessary for validtaion plugin -> validation.js
if (Modernizr.localstorage) {
    localStorage.getItem('language') || localStorage.setItem('language', navigator.language || navigator.userLanguage);
}

requirejs.config({
    paths: paths,
    shim: {
        touchswipe: {
            deps: ['jquery']
        },
        icheck: {
            deps: ['jquery']
        },
        validate: {
            deps: ['jquery']
        },
        mask: {
            deps: ['jquery']
        },
        chosenImage: {
            deps: ['jquery', 'chosen']
        },
        cookie: {
            deps: ['jquery']
        }
    }
});

require(['globals', 'jquery', 'underscore'], function() {

    var initial = ['main'];

    if (!Modernizr.localstorage) {
        initial.push('cookie');
    }

    require(initial, function(Main) {
        $(function() {
            if (!Modernizr.localstorage) {
                $.cookie.json = true;
            }
            Main.init();
        });
    });

});

会生成

app build.js

，但当我将其包含在index.php中时，所有其他模块也会加载。如何防止加载所有模块而只加载

app build.js

我建议你调查一下 或者当这些为你解决这个问题

它们允许您像以前一样使用

require

，但代码被编译/连接到单个文件中

Webpack允许更灵活地为站点的不同部分加载不同的代码块，但Browserify是迄今为止最著名的

切换到这些可能会有成本，因为我不认为它们是100%兼容的requirejs，但是它们带来了巨大的优势

---

有人从RequireJS到Browserify的过程有一些优点和缺点。

将模块分成不同的文件，例如

app build.js

，

user build.js

。然后在需要时加载脚本

这里有一个演示：

---

加载页面时，requirejs仅加载

global.js

。单击

更改颜色

按钮后，requirejs开始加载

colorfy.js

和

random Color.js

，这是

colorfy.js
所需的，我不确定确切的细节，但是，如果您没有
导出
选项，r.js不会为您定义命名模块，这将导致实际加载脚本

我假设您有jquery插件，所以添加这个额外的
exports
选项：

shim: {
    touchswipe: {
        deps: ['jquery'],
        exports: 'jQuery.fn.touchswipe'
    },

这将迫使r.js为TouchWipe构建命名模块：

define("touchswipe", (function (global) {
    return function () {
        var ret, fn;
        return ret || global.jQuery.fn.touchswipe;
    };
}(this)));

请注意，
exports
选项可能不会生成此命名模块，在这种情况下，最好是手动包含此模块

同样，我也不确定为什么会发生这种情况以及如何发生这种情况，这一定是requirejs中的一个bug，不太可能有任何调整。
将r.js优化器（改为uglify2）为我解决了这个问题：

var config = {
    baseUrl: __dirname,
    paths: paths,
    name: 'app',
    out: 'app-built.js',
    findNestedDependencies: true,
    preserveLicenseComments: false,
    removeCombined: true,
    optimize: 'uglify2'
};

您的
app build.js
文件是否包含您期望的模块？请在问题中添加与加载和配置RequireJS和应用程序有关的所有原始HTML语句。（您的图像显示了在RequireJS启动后一些脚本标记的内容。这很有用，但我要查找的是RequireJS启动时最初看到的内容。）
var config = {
    baseUrl: __dirname,
    paths: paths,
    name: 'app',
    out: 'app-built.js',
    findNestedDependencies: true,
    preserveLicenseComments: false,
    removeCombined: true,
    optimize: 'uglify2'
};