javascript - RequireJS 路径配置

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

<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>

但是在生产环境中，我只有用于库和插件的两个连接文件：

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

那么，我现在该如何编写我的配置“paths”呢？我没有任何 ‘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'
})

更新 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>

更新 2：

好的，“优先级”已经清楚了，所以，我不需要第一个和第二个«script»标签（但是我需要把“Require.js”和“libraries.js”分开）——RequireJS 会自动加载它们。但是对于“libraries.js”文件中的非 AMD 库应该怎么处理呢？

AngularJS 和 UnderscoreJS 是非 AMD 模块，这就是为什么我必须使用“shim”，对吗？但是为了让“shim”生效，我还需要使用“paths”，这样“shim”才能找到被 shim 的模块，对吧？但是我仍然只有一个文件——“libraries.js”，我无法在“path”选项中写它……真的很困惑……

答案＃1

为了预加载公共库代码，你应该使用 priority 配置选项。你可以在你的 foo/main.js 文件中放入类似这样的内容

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

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

({
    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'
})

答案＃2

你应该在两个环境中使用相同的配置。并且你拥有的这个配置应该放在外部文件中。当你使用 r.j 优化它时，所有模块都已经在那个单一文件中，所以 RequireJS 会直接使用它们而无需加载。看起来你需要调整你的构建过程。

查看我最近关于它的博客文章。