【问题标题】:Shim from grunt-contrib-requirejs not wrapping library来自 grunt-contrib-requirejs 的垫片不包装库
【发布时间】:2013-10-22 14:58:36
【问题描述】:

我正在使用 requirejs 并配置我的产品工件,从而组合我的库并设置它们之间的模块依赖关系,以使用 requirejs 的 grunt 任务获得适当的加载顺序。我在可以访问非组合库的 livereload 服务器中使用运行时模块注入没有问题。为了清楚起见,我禁用了所有缩小/丑化并打开了 js-beautify。

    requirejs: {
        dist: {
            // Options: https://github.com/jrburke/r.js/blob/master/build/example.build.js
            options: {
                // `name` and `out` is set by grunt-usemin
                // name: 'App',
                baseUrl: yeomanConfig.app + '/scripts',
                mainConfigFile: yeomanConfig.app + '/scripts/config.js',
                out: yeomanConfig.dist + '/scripts/main.js',
                optimize: 'none',
                // TODO: Figure out how to make sourcemaps work with grunt-usemin
                // https://github.com/yeoman/grunt-usemin/issues/30
                //generateSourceMaps: true,
                // required to support SourceMaps
                // http://requirejs.org/docs/errors.html#sourcemapcomments
                beautify: false,
                removeCombined: false,
                generateSourceMaps: false,
                preserveLicenseComments: false,
                useStrict: true,
                mangle: false,
                compress: false,
                // wrap: true,
                // https://github.com/mishoo/UglifyJS2
            }
        }
    },

我正在使用 Kendo、Angular 和 Angular-Keno-UI。我知道 Kendo 已经支持 AMD 模块,但它看起来不像 Angular-Keno-UI。我期待创建一个 shim 并将其包装在适当的 requirejs 定义函数中,但是我没有发现这种情况发生。

    require.config({
        cjsTranslate: true,
        paths: {
            jquery: 'vendor/jquery/jquery',
            'angular-kendo-ui': 'vendor/angular-kendo-ui/build/angular-kendo',
            kendo: 'vendor/kendoui.complete.2013.2.918.trial/js/kendo.all.min',
            angular: 'vendor/angular/angular',
            requirejs: 'vendor/requirejs/require',
            'angular-animate': 'vendor/angular-animate/angular-animate',
            'angular-ui-router': 'vendor/angular-ui-router/release/angular-ui-router.min',
            'angular-resource': 'vendor/angular-resource/angular-resource'
        },
        shim: {
            jquery: {
                exports: '$'
            },
            angular: {
                deps: [
                    'jquery'
                ],
                exports: 'angular'
            },
            'angular-resource': {
                deps: [
                    'angular'
                ]
            },
            'angular-kendo-ui': {
                deps: [
                    'angular',
                    'kendo'
                ]
            },
            'angular-ui-router': {
                deps: [
                    'angular'
                ]
            }
        }
    });

为了解决模块准备不足的问题,我自己将其包装成这样:

    define('angular-kendo-ui', [
        'angular', 
        'kendo'
      ], function (
        angular,
        kendo
      ) {
        < original angular-kendo-ui source >
    });

我是否误解了垫片的应用?看起来我有,它实际上并没有包装定义的路径,而是在请求模块时指向它(这在动态模块加载中很好)

在我对这些技术的初步审查期间,我注意到有一种方法可以让 requirejs(或我的管道中的一个资产变异器)自动为我包装模块。任何人都对我有提示,我认为是 requirejs 会将配置中定义的模块包装为路径,但也许我错了。以下是正在运行的任务的打印输出:

    Done, without errors.

    Elapsed time
    build                          887ms
    useminPrepare:html             22ms
    concurrent:dist                8s
    autoprefixer:dist              174ms
    requirejs:dist                 19s
    jsbeautifier:dist              2s
    concat:public/styles/main.css  46ms
    concat:public/scripts/main.js  56ms
    cssmin:public/styles/main.css  81ms
    copy:dist                      26ms
    usemin:html                    5s
    usemin:css                     24s

【问题讨论】:

    标签: angularjs requirejs gruntjs angular-ui grunt-contrib-requirejs


    【解决方案1】:

    这只是一个疯狂的猜测(取决于您的优化器版本)但 - 不是很酷 - 配置文档在此处说明:

    从 2.1.11 开始,填充依赖项可以包装在 define() 包装器中 当中间依赖项是 AMD 具有它们的依赖项时提供帮助 自己的。典型的例子是一个使用 Backbone 的项目,它依赖于 jQuery 和下划线。需要 Backbone 可用的填充依赖项 立即不会在构建中看到它,因为 AMD 兼容版本 Backbone 不会执行 define() 函数,直到依赖项 准备好。通过包装那些填充的依赖项,可以避免这种情况,但是 如果这些填充的依赖项使用 全局范围以奇怪的方式,因此它不是包装的默认行为。

    所以也许使用:

    wrapShim: true
    

    https://github.com/jrburke/r.js/blob/master/build/example.build.js

    由于您使用“mainConfigFile”,shim 配置应该已经在优化器中,这通常是另一个故障点。

    【讨论】:

    • 经过3个多小时的调试,我找到了这个答案-谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-05-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-25
    相关资源
    最近更新 更多