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

时间:2014-03-14 11:54:14

标签: javascript r optimization requirejs r.js

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

错误全部在加载,类似于:

Uncaught TypeError: undefined is not a function

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

我的构建文件中有什么问题吗?我在我的应用程序中使用了几个插件但是由于垫片已经配置并且在优化之前工作,我很困惑为什么这会破坏。

一方面注意到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'
        }
    }
})

2 个答案:

答案 0 :(得分:1)

您的配置中存在两个会导致神秘问题的问题:

  1. jQuery 1.9.1不需要垫片。删除您为其设置的垫片。知道的方法是查看要与RequireJS一起使用的库的源代码。旨在使用RequireJS的库将自己调用define。不要假设调用将是文件中的第一件事。在JQuery的情况下,呼叫即将结束。搜索它。

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

答案 1 :(得分:0)

解决方案:

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

  1. 我有一个jquery 1.9.1的垫片,这不是路易斯指出的
  2. 我有一个不完整的部署文件,使用mainConfigFile属性来复制我的main.js配置是一个很好的简单方法来排序。
  3. 我有两个导致问题的插件,一个是AMD兼容的,另一个不是。
  4. 要解决部署脚本问题,我只需要删除jquery和parsley的垫片,因为它们都是兼容的,所以不需要垫片并使用mainConfigFile匹配main.js配置。

    当您在终端/ cmd中运行r.js时,这将导致错误,因为jquery位于CDN中。要修复该问题,只需将“jquery”:“empty:”添加到build.js中的paths属性中。这将覆盖main.js配置,允许r.js继续。

    要解决插件错误,我只需要像使用自己的模块一样使用define方法包装两个插件,不需要返回任何内容,只需确保列出了依赖项。

    最终来源:

    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
    });
    

    build.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*
    });