Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Shim from grunt-contrib-requirejs not wrapping library

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
like image 854
techie.brandon Avatar asked Nov 01 '22 12:11

techie.brandon


1 Answers

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.

like image 193
pscheit Avatar answered Nov 15 '22 12:11

pscheit