5

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
4

1 回答 1

2

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

从 2.1.11 开始，可以将填充的依赖项包装在一个 define() 包装器中，以在中间依赖项是 AMD 拥有自己的依赖项时提供帮助。典型的例子是一个使用 Backbone 的项目，它依赖于 jQuery 和 Underscore。希望 Backbone 立即可用的填充依赖项将不会在构建中看到它，因为 AMD 兼容版本的 Backbone 在依赖项准备好之前不会执行 define() 函数。通过包装这些填充依赖项，可以避免这种情况，但如果这些填充依赖项以奇怪的方式使用全局范围，它可能会引入其他错误，因此它不是包装的默认行为。

所以也许使用：

wrapShim: true

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

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

于 2014-06-05T06:20:55.327 回答