沉从咕噜-的contrib-requirejs没有包装库 [英] Shim from grunt-contrib-requirejs not wrapping library

查看:199
本文介绍了沉从咕噜-的contrib-requirejs没有包装库的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用requirejs和配置我的产品的文物,因而结合我的图书馆和建立它们之间的模块依赖使用咕噜任务requirejs得到加载顺序为宜。我一直在使用运行时模块注入,而在有访问非组合的库我livereload服务器没有问题。为了清楚起见,我已禁用所有的缩小/丑化并打开一个JS-美化。

  requirejs:{
        距:{
            //选项:https://github.com/jrburke/r.js/blob/master/build/example.build.js
            选项​​:{
                //`name`和`out`由咕噜,usemin设置
                //名称:'应用',
                的baseUrl:yeomanConfig.app +'/脚本,
                mainConfigFile:yeomanConfig.app +'/scripts/config.js',
                出:yeomanConfig.dist +'/scripts/main.js',
                优化:'无',
                // TODO:弄清楚如何使sourcemaps与咕噜,usemin工作
                // https://github.com/yeoman/grunt-usemin/issues/30
                // generateSourceMaps:真实,
                //需要支持SourceMaps
                // http://requirejs.org/docs/errors.html#sourcemapcomments
                美化:假的,
                removeCombined:假的,
                generateSourceMaps:假的,
                preserveLicenseComments:假的,
                useStrict:真实,
                轧:假的,
                COM preSS:假的,
                //包:真的,
                // https://github.com/mishoo/UglifyJS2
            }
        }
    },

我使用的剑道,角度和角基诺-UI。我的理解是剑道AMD-模块准备好,但它并不像角基诺的UI是。我期待创造一个垫片,它被包裹在适当requirejs定义功能,但我不觉得这是发生了。

  require.config({
        cjsTranslate:真实,
        路径:{
            jQuery的:供应商/ jQuery的/ jQuery的,
            角剑道的UI':'供应商/角剑道的UI /编译/角剑道',
            剑道:供应商/ kendoui.c​​omplete.2013.2.918.trial / JS / kendo.all.min',
            角:供应商/角/角',
            requirejs:供应商/ requirejs /要求',
            角动画':'供应商/角动画/角动画,
            角UI路由器':'供应商/角UI路由器/发行/角-UI-router.min',
            角资源':'供应商/角资源/角资源
        },
        垫片:{
            jQuery的:{
                出口:$
            },
            角度:{
                DEPS:
                    jQuery的
                ]
                出口:'角'
            },
            角资源:{
                DEPS:
                    角
                ]
            },
            角剑道的UI':{
                DEPS:
                    '角',
                    '剑道'
                ]
            },
            角UI路由器:{
                DEPS:
                    角
                ]
            }
        }
    });

要解决缺少模块preparation我自己把它包装成这样的:

 定义(角剑道的UI',[
        '角',
        '剑道'
      ],功能(
        棱角分明,
        剑道
      ){
        <原角剑道的UI源>
    });

我有误解垫片的应用程序?这似乎我已经和它实际上并没有换行的路径定义,但如果要求的模块,而只是指向它(这是在动态模块加载罚款)

在我的这些技术的初步审核我注意到的地方,有一个办法有requirejs(或在我的管道资产存取器之一)自动换模块我。人有我一个提示,我认为它是将包裹在配置为路径定义的模块requirejs但也许我错了。下面是任务的打印输出为然:

 完成,没有错误。    经过时间
    建立887ms
    usemin prepare:HTML 22毫秒
    并发:DIST 787-8
    汽车prefixer:DIST 174ms
    requirejs:DIST 19S
    jsbeautifier:DIST 2S
    CONCAT:公共/风格/的main.css 46ms
    CONCAT:公共/脚本/ main.js 56MS
    cssmin:公共/风格/的main.css 81ms
    副本:DIST 26ms
    usemin:HTML 5秒
    usemin:CSS 24S


解决方案

这只是胡乱猜测(取决于您的优化器版本),但 - 不是很爽 - 在这里配置的文档状态:


  

由于2.1.11,匀依赖性可以被包裹在一个定义()包装
      帮助时,中间的依赖关系是AMD有自己的依赖
      拥有。典型的例子是使用骨干项目,它依赖于
      jQuery和下划线。希望可以骨干匀依赖
      马上不会看到它在构建,因为AMD兼容版本
      骨干网将不执行定义()函数,直到依赖关系
      准备。通过包装的匀依赖关系,这是可以避免的,但
      如果这些匀依赖使用它可以引入其他错误
      怪异的方式全球范围内,所以它不是默认的行为来包装。


所以也许是:

真:

  wrapShim

https://github.com/jrburke/ r.js / BLOB /主/建设/ example.build.js

因为你使用mainConfigFile垫片配置应该已经在优化,这往往是失败的另一点。

I am using requirejs and configuring my product artifacts, thus combining my libraries and setting up module dependencies between them to get the loading sequence appropriate using the grunt task for requirejs. I have no problem using runtime module injection while in my livereload server which has access to non-combined libraries. For the sake of clarity I have disabled all minification/uglification and turned on a 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
            }
        }
    },

I am using Kendo, Angular, and Angular-Keno-UI. I understand Kendo is AMD-module-ready but it doesn't look like Angular-Keno-UI is. I was expecting to create a shim and it be wrapped in the appropriate requirejs define function, however I do not find this to be happening.

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

To resolve the lack of module preparation I wrap it myself as such:

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

Have I misunderstood the application of the shims? It would seem I have and it doesn't actually wrap the path defined but rather just points to it if the module is requested (which is fine in dynamic module loading)

During my initial vetting of these technologies I noted SOMEWHERE that there was a way to have requirejs (or one of the asset mutators in my pipeline) automatically wrap modules for me. Anyone have a hint for me, I assume it was requirejs that would wrap modules defined in the config as paths but maybe I was wrong. Below is a printout of tasks being ran:

    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

解决方案

It's just a wild guess (depending on your optimizer version) but the - not so cool - config-documentation states here:

As of 2.1.11, shimmed dependencies can be wrapped in a define() wrapper to help when intermediate dependencies are AMD have dependencies of their own. The canonical example is a project using Backbone, which depends on jQuery and Underscore. Shimmed dependencies that want Backbone available immediately will not see it in a build, since AMD compatible versions of Backbone will not execute the define() function until dependencies are ready. By wrapping those shimmed dependencies, this can be avoided, but it could introduce other errors if those shimmed dependencies use the global scope in weird ways, so it is not the default behavior to wrap.

so maybe use:

wrapShim: true

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

since your using "mainConfigFile" the shim config should already be in the optimizer, this is often another point of failure.

这篇关于沉从咕噜-的contrib-requirejs没有包装库的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆