来自 grunt-contrib-requirejs 的 Shim 不包装库 [英] Shim from grunt-contrib-requirejs not wrapping library

问题描述

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

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
            }
        }
    },

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

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)

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

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

推荐答案

这只是一个疯狂的猜测(取决于您的优化器版本)但是 - 不太酷 - config-documentation 在这里声明:

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

从 2.1.11 开始，可以将经过垫片处理的依赖项包装在一个 define() 包装器中当中间依赖项是 AMD 的依赖项时提供帮助自己的.典型的例子是一个使用 Backbone 的项目，它依赖于jQuery 和下划线.需要 Backbone 可用的 Shimmed 依赖项立即不会在构建中看到它，因为 AMD 兼容版本的Backbone 不会执行define() 函数，直到依赖项被准备好.通过包装那些经过垫片处理的依赖项，可以避免这种情况，但是如果那些经过垫片处理的依赖项使用以奇怪的方式全局作用域，所以它不是包装的默认行为.

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.

所以也许使用:

wrapShim: true

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

由于您使用mainConfigFile"，垫片配置应该已经在优化器中，这通常是另一个失败点.

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

这篇关于来自 grunt-contrib-requirejs 的 Shim 不包装库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！