javascript - RequireJS 不适用于具有 CDN 托管库 (jQuery) 的多页项目

Question

我在一个多页项目上使用 RequireJS，它的 Javascript 文件夹结构看起来有点像这样(你如何在 Markdown 中再次制作那些花哨的目录树？):

common.js
lib/
-- jquery-1.9.1.min.js
-- modernizr-2.6.2.min.js
-- underscore-amd.min.js
page/
-- index.js
-- start.js
-- checkout.js

无论如何，common.js 是我设置配置参数的主要脚本文件。这是它的样子:

common.js 文件

// Configure RequireJS
requirejs.config({
    baseUrl: "assets/js/lib",
    paths: {
        page: '../page',
        jquery: [
            '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
            //If the CDN location fails, load from this location
            'jquery-1.9.1.min'
        ],
        modernizr: [
            '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min',
            //If the CDN location fails, load from this location
            'modernizr-2.6.2.min'
        ],
        underscore: [
            'underscore-amd.min'
        ]
    }
});

所有页面调用都按预期工作(加载了 CDN 位置)，但我无法理解缩小部分。 r.js 优化器只是拒绝合作，抛出一个 Error: paths fallback not supported in optimizer。请为 underscore 提供构建配置路径覆盖，即使 Underscore 没有指定 CDN。

build.js 文件

{
    appDir: '../www',
    baseUrl: 'js/lib',
    dir: '../www-built',
    mainConfigFile: '../www/assets/js/common.js',
    modules: [
        //First set up the common build layer.
        {
            //module names are relative to baseUrl
            name: '../common',
            include: ['jquery',
                      'modernizr',
                      'underscore'
            ]
        },
        // Now the page scripts
        {
            //module names are relative to baseUrl/paths config
            name: '../page-index',
            include: ['page/index'],
            exclude: ['../common']
        },
    ],
    paths: {
        jquery: "empty",
        modernizr: "empty"
    },
    optimize: "uglify2",
    removeCombined: true
}

请帮助我了解如何构建此项目以创建 common.js 脚本以及各个页面脚本。

(注意:我的 build.js 文件的结构基于 this example

已更新!

我已经更新了问题以包含 empty: 的正确语法(感谢 Travis!)，现在构建运行没有错误。但是，我的 JS 文件没有连接或丑化。 CSS 文件位于导入点，因此发生了一些事情。下面是完整的 build.js 文件(请原谅，她个子很高):

{
    appDir: '../www',
    baseUrl: 'assets/js', // relative to appDir
    dir: '../www-built',
    mainConfigFile: '../www/assets/js/common.js',
    modules: [
        //First set up the common build layer.
        {
            //module names are relative to baseUrl
            name: 'common',
            //List common dependencies here. Only need to list
            //top level dependencies, "include" will find
            //nested dependencies.
            include: ['jquery',
                      'modernizr',
                      'underscore',
                      'bootstrap'
            ]
        },

        //Now set up a build layer for each page, but exclude
        //the common one. "exclude" will exclude nested
        //the nested, built dependencies from "common". Any
        //"exclude" that includes built modules should be
        //listed before the build layer that wants to exclude it.
        //"include" the appropriate "app/main*" module since by default
        //it will not get added to the build since it is loaded by a nested
        //require in the page*.js files.
        {
            //module names are relative to baseUrl/paths config
            name: 'pages/home',
            include: ['pages/home'],
            exclude: ['common']
        },
        {
            //module names are relative to baseUrl/paths config
            name: 'pages/start',
            include: ['pages/start'],
            exclude: ['common']
        },
        {
            //module names are relative to baseUrl/paths config
            name: 'pages/checkout',
            include: ['pages/checkout'],
            exclude: ['common']
        },
    ],
    paths: {
        jquery: "empty:",
        modernizr: "empty:"
//        underscore: "empty:"
    },
    optimize: "uglify2",
    optimizeCss: "standard",
    removeCombined: true,
    preserveLicenseComments: false
}

最终更新(耶!它正在运行)

感谢下面的 Travis，一切正常! (文件正在缩小和连接)。由于他的解决方案托管在 Dropbox 上，将来可能会丢失(谁知道 amirite？)，我将总结他所做的修复:

1。不要在单个文件中混合调用 define 和 require。

我有几个文件，我将它们混合在一起:

page/start.js

 define(['jquery','underscore'],function($,_) {
      ...
 });

 require(['jquery','page/start'], function($, Y) { // BAD!
      ...
 });

解决方法是这样做:

page/start.js

 require(['jquery','app/start_helper'], function($, Y) {
      ...
 });

app/start_helper.js

 define(['jquery','underscore'],function($,_) {
      ...
 });

2。它是 "empty:" 而不是 "empty"

虽然 RequireJS 文档提到了它们，但这是一个棘手的问题。

3。因为

什么样的列表只有 2 个要点？

---

Awesomelicious - 现在它就像一个魅力:)

Answer 1

看起来 requireJs 认为您正在尝试为下划线提供路径回退，因为您将其路径值指定为数组。尝试将其作为字符串来代替。

paths: {
    underscore: 'underscore-amd.min'
}

另请注意 correct symbol for empty paths是 empty:(带有 ':')不是 empty。

最后，作为一个不相关的旁注，您可以随时查看 lodash恕我直言，这是一个更可定制、跨浏览器兼容、更快的下划线替换，具有相同的 API，它托管在 cdnjs 上并且符合 AMD

更新

跟进评论中的对话，这是我对您的项目的更新版本:https://dl.dropboxusercontent.com/u/21823728/so_rjs.tar.gz

如评论中所述，您的问题似乎是您在需要这些模块的同一个文件中定义ing 模块，而且我认为这导致 r.js 相信这些模块没有主入口点。约定是将模块定义与需要这些模块的文件分开。

注意 assets/js 下现在有一个 app 文件夹.您的页面模块现在 require 这些模块。当我重新运行 r.js(使用 uglify2 作为优化器)时，一切似乎都按预期工作。

此外，我从您的 build.js 文件中删除了一些冗余(您只需在您的 mainConfigFile 中指定 baseUrl，如果您也将其用于您的构建配置)。最后，您可能需要研究使用 shim config如果你想将 jQuery 和 Bootstrap 全局附加到每个页面。否则，您应该在需要时明确地将它们列为依赖项。

最后，作为最后一条建议，您可能希望减少每个文件中的 require 数量。对于这些页面中的大多数，您可以将所有内容包装在一个 require 调用中，然后将不同的逻辑分离到函数中，以节省事件队列上的一些空间以及一些不得不冗余调用 require 函数的周期。