首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >不需要包装库

不需要包装库
EN

Stack Overflow用户
提问于 2013-10-22 14:58:36
回答 1查看 1.4K关注 0票数 5

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

代码语言:javascript
复制
    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
            }
        }
    },

我正在使用剑道,角形,和角-基诺-UI。我知道Kendo是AMD模块准备好的,但它看起来不像角-Keno。我本来希望创建一个shim,并将它包装在适当的函数中,但是我发现这种情况并没有发生。

代码语言:javascript
复制
    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'
                ]
            }
        }
    });

为了解决缺乏模块准备的问题,我将其包装如下:

代码语言:javascript
复制
    define('angular-kendo-ui', [
        'angular', 
        'kendo'
      ], function (
        angular,
        kendo
      ) {
        < original angular-kendo-ui source >
    });

我是否误解了希姆斯的应用?似乎我已经完成了,而且它实际上并没有包装所定义的路径,而是在模块被请求时指向它(这在动态模块加载中很好)。

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

代码语言:javascript
复制
    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
EN

回答 1

Stack Overflow用户

发布于 2014-06-05 06:20:55

这只是一个粗略的猜测(取决于优化器版本),但是--并不是很酷--配置文档在这里声明:

从2.1.11开始,可以将shimmed依赖关系包装在定义()包装中,以帮助当中间依赖项是AMD时,AMD有自己的依赖关系。规范示例是一个使用主干的项目,它依赖于jQuery和下划线。希望立即可用主干的抖动依赖项将不会在构建中看到它,因为AMD兼容版本的主干在依赖项准备就绪之前不会执行定义()函数。通过包装那些闪烁的依赖项,这是可以避免的,但如果这些闪烁依赖项以奇怪的方式使用全局范围,则可能会导致其他错误,因此它不是默认的包装行为。

所以也许可以使用:

代码语言:javascript
复制
wrapShim: true

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

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19521423

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档