RequireJS路径配置

Question

我在RequireJS的开发配置(在"index.html"文件中)是:

<script src="require-2.1.5.min.js"></script>
<script>
    require.config({
        baseUrl: 'js',
        paths: {
            angular: 'libraries/angular-1.1.5.min',
            jquery: 'libraries/jquery-2.0.0.min',
            underscore: 'libraries/underscore-1.4.4.min',
            ...
            zeroclipboard: 'plugins/zeroclipboard-1.0.7.min',
            tablesorter: 'plugins/jquery.tablesorter-2.9.1.min',
            ...
        },
        shim: {
            'angular': {
                exports: 'angular'
            },
            'underscore': {
                exports: '_'
            }
        },
        packages: [
            {
                name: 'index',
                location: 'app/index',
                main: 'main'
            }
        ]
    });

    require(['index']);
</script>

但在生产中,我只有2个用于库和插件的连接文件:

js/libraries.js // all jQuery, AngularJS, RequireJS, Underscore and other libraries concatenated
js/plugins.js // all plugins (already an AMD modules, no need for "shim" config) concatenated

那么,我现在如何编写配置"路径"？我没有任何'libraries/angular-1.1.5.min.js'和其他路径.

我的解决方案是写:

    paths: {
        angular: 'libraries',
        underscore: 'libraries'
    }

我将AngularJS和Underscore与'libraries.js'文件联系起来,一切都很完美.(不需要jQuery和所有插件 - 它们已经是AMD模块).

但这是编写路径的正确方法吗？我的解决方案在我看来有点肮脏的解决方法,而不是最佳实践解决方案.

我的r.js构建过程:

({
baseUrl: 'scripts',
paths: {
    jquery: 'jquery-2.0.0.min',
    ...
    tablesorter: 'jquery.tablesorter-2.0.5.min',
    zeroclipboard: 'zeroclipboard-1.0.7.min'
},
name: 'foo/main',
exclude: [
    'angular',
    'jquery',
    ...
    'tablesorter',
    'zeroclipboard'
],
optimize: 'uglify',
out: 'production/js/foo.js'
})

UPD 1:

我想要的是:

www.mysite.com/about.html:

<script src="js/libraries.js"></script><-- jQuery (already AMD), AngularJS (not AMD), RequireJS, Underscore (not AMD) and other libraries already here, only 1 http request needed //-->
<script src="js/plugins.js"></script><-- all AMD //-->
<script>
    require.config({
        baseUrl: 'js',
        paths: {
            angular: WHAT I NEED TO WRITE HERE?,
            underscore: WHAT I NEED TO WRITE HERE?
        },
        shim: {
            'angular': {
                exports: 'angular'
            },
            'underscore': {
                exports: '_'
            }
        },
        packages: [
            {
                name: 'about',
                location: 'js',
                main: 'about'
            }
        ]
    });

    require(['about']); // will load "js/about.js"
</script>

UPD 2:

好的,关于"优先级"很清楚,因此,我不需要第一个和第二个"脚本"标签(但我需要将"Require.js"与"libraries.js"分开) - RequireJS将自动加载它们.但是对于"libraries.js"文件中的非AMD库应该怎么做？

AngularJS和UnderscoreJS是非AMD模块,这就是为什么我必须使用"shim",对吧？但是为了使"垫片"工作,我也需要使用"路径",所以"垫片"可以找到填充模块,对吗？但是我仍然只有一个文件 - "libraries.js"而且我不能用"path"选项写它...真的卡住了......

Answer 1

为了预先加载公共库代码,您应该使用priority config选项.你可以把这样的东西放在你的foo/main.js文件中

require.config({
    priority: ["libraries", "plugins"]
});

然后你的构建文件看起来像这样.库和插件文件应包含一个define语句,该语句定义所有被认为是通用/下载一次的依赖项.

({
    baseUrl: 'scripts',
    paths: {
        jquery: 'jquery-2.0.0.min',
        ...
        tablesorter: 'jquery.tablesorter-2.0.5.min',
        zeroclipboard: 'zeroclipboard-1.0.7.min'
    },
    modules: [
        {
            name: 'foo/main'
            excludes: ...
        },
        {
            name: 'libraries'
        },
        {
            name: 'plugins'
        }
    ],
    optimize: 'uglify',
    out: 'production/js/foo.js'
})