使用 r.js 优化 requirejs 会导致未定义的错误

Question

我正在使用 requirejs，并且我有一个工作应用程序，但是在运行 r.js 优化器时，我发现在编译的脚本中不可能不返回任何未定义的错误。

错误都在加载，类似于：

Uncaught TypeError: undefined is not a function

在优化之前，我有 0 个错误并且一切都按预期工作，但是在使用以下构建文件运行 r.js 时，我在加载文件时收到未定义的 js 错误。

我在构建文件中做错了什么吗？我在我的应用程序中使用了几个插件，但是由于 shim 在优化之前已配置并工作，我很困惑为什么这会中断。

附带说明的是，r.js 不包括导致问题的 require.js，为了解决我在调用主脚本之前手动包含了 require.js，这看起来可以解决问题，但老实说，这很难说出问题所在！

感谢您的观看！ :)

main.js：

require.config({
    baseUrl: "*my base url*",
    shim: {
        jquery: {
            exports: 'jQuery'
        },
        parsley: {
            deps: ["jquery"]
        },
        marquee: {
            deps: ["jquery"]
        },
        'facebook' : {
            exports: 'FB'
        }
    },

    paths: {
        jquery: [
            "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
            "vendor/jquery"
        ],
        parsley: "vendor/parsley",
        marquee: "vendor/jquery.marquee.min",
        'facebook': '//connect.facebook.net/en_US/all'
    },

    waitSeconds: 0
});

requirejs(['jquery', 'modules/log', 'modules/util', 'modules/youtube/youtube', 'modules/ticker', 'parsley', 'modules/fb'
], function ($, log, util) { 

*app stuff* 

});

构建配置：

({
    appDir: './',
    baseUrl: './',
    dir: './dist',
    modules: [
        {
            name: 'main',
        }
    ],
    fileExclusionRegExp: /^(r|build)\.js$/,
    optimizeCss: 'none',
    optimize: "none",
    removeCombined: true,
    paths: {
        jquery: "empty:",
        facebook: "empty:"
    },
    shim: {
        jquery: {
            exports: 'jQuery'
        },
        'facebook' : {
            exports: 'FB'
        }
    }
})

Answer 1

您的配置中有两个问题会导致神秘问题：

1. jQuery 1.9.1 不需要垫片。卸下您为其设置的垫片。了解的方法是查看要与 RequireJS 一起使用的库的源代码。设计用于 RequireJS 的库将自己调用 define。不要假设调用将是文件中的第一件事。在 JQuery 的情况下，调用接近尾声。搜索它。

2. 在您的构建配置（您传递给r.js）中，使用mainConfigFile 指向您的运行时配置（在您的情况下为main.js）。优化器需要与您的运行时配置中的shim 配置完全相同。目前，您的构建配置中的 shim 列表不完整。

Answer 2

解决方案：

感谢 Louis，我能够解决我未定义的问题。有很多问题：

1. 我有一个 jquery 1.9.1 的垫片，正如 Louis 指出的那样，这不是必需的
2. 我的部署文件不完整，使用 mainConfigFile 属性复制我的 main.js 配置是一种很好的简单排序方法。
3. 我有两个导致问题的插件，一个与 AMD 兼容，另一个不兼容。

为了解决部署脚本问题，我只需要删除 jquery 和 parsley 的 shim，因为它们都符合要求，因此不需要 shim 并使用 mainConfigFile 匹配 main.js 配置。

当您在终端/cmd 中运行 r.js 时，这将导致错误，因为 jquery 是从 CDN 定位的。要解决这个问题，只需将 'jquery' : 'empty:' 添加到 build.js 中的 paths 属性中。这将覆盖 main.js 配置，允许 r.js 继续。

为了解决插件错误，我只需要像你自己的模块一样用定义方法包装两个插件，不需要返回任何东西，只要确保你已经列出了依赖项。

最终来源：

main.js

require.config({
    baseUrl: "*my base url*",
    shim: {
        'facebook' : {
            exports: 'FB'
        }
    },
    paths: {
        jquery: [
            "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
            "vendor/jquery"
        ],
        parsley: "vendor/parsley",
        marquee: "vendor/jquery.marquee.min",
        'facebook': '//connect.facebook.net/en_US/all'
    },

    waitSeconds: 0
});

构建.js

({
    appDir: './',
    baseUrl: './',
    dir: './dist',
    modules: [
        {
            name: 'main',
        }
    ],
    fileExclusionRegExp: /^(r|build)\.js$/,
    optimizeCss: 'none',
    removeCombined: true,
    mainConfigFile: './main.js',
    paths: {
        "jquery": "empty:"
    }
})

插件示例：

define(['jquery'], function (jQuery) {
     *some jquery plugin code*
});