Requirejs 在bower_组件中定义供应商库自定义版本的正确方法是什么?

Requirejs 在bower_组件中定义供应商库自定义版本的正确方法是什么?,requirejs,gruntjs,amd,yeoman,Requirejs,Gruntjs,Amd,Yeoman,我将yeoman webapp generator与requirejs一起使用,并使用bower安装了canjs canjs具有如下所示的dir结构 app/bower_components/canjs/amd/can.js app/bower_components/canjs/amd/can/control.js app/bower_components/canjs/amd/can/control/route.js etc.. can.js文件中包含以下内容 define(["can/ut

我将yeoman webapp generator与requirejs一起使用,并使用bower安装了canjs

canjs具有如下所示的dir结构

app/bower_components/canjs/amd/can.js
app/bower_components/canjs/amd/can/control.js
app/bower_components/canjs/amd/can/control/route.js
etc.. 
can.js文件中包含以下内容

define(["can/util/library", "can/control/route", "can/model", "can/view/ejs", "can/route"], function(can) {
    return can;
});
所有依赖性文件(control.js、route.js)都在define()函数中列出了它们的依赖性

我想做的是定制canjs构建并将“can/view/ejs”替换为“can/view/mustache”。我可以通过在can.js文件中更改对ejs的引用来实现它,但这意味着我正在bower_components目录中编辑一个供应商文件

我尝试在scripts dir中创建一个mycan.js构建,它看起来与bower_组件中的can.js文件(除了胡须依赖项更改)相同,然后我将配置更改为如下所示

require.config({
    paths: {
        jquery: '../bower_components/jquery/jquery',
        can: '../bower_components/canjs/amd/can',
        etc..
然后,我需要在任何需要它的文件中使用mycan模块

如果我注释掉bower_components/canjs/amd/can.js中的代码,这将正常工作,但是如果我不注释掉文件,它将需要两个版本(包括我不想要的can/view/ejs文件)

在usage 1.1下的require docs中,有一个示例

•   www/
•   index.html
•   js/
•   app/
•   sub.js
•   lib/
•   jquery.js
•   canvas.js
•   app.js
在app.js中:

requirejs.config({
     //By default load any module IDs from js/lib
    baseUrl: 'js/lib',
    //except, if the module ID starts with "app",
    //load it from the js/app directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        app: '../app'
    }
});

// Start the main app logic.
requirejs(['jquery', 'canvas', 'app/sub'],
function   ($,        canvas,   sub) {
    //jQuery, canvas and the app/sub module are all
    //loaded and can be used here now.
});
在这里,他们使用的路径是目录,而不是文件。找到子模块是因为它将app/sub与路径配置中的app相匹配

如果我在包含require.config的main.js文件中定义我自己的can版本,那么它似乎可以工作,但当我开始构建应用程序时,它会说

tim@machine:~/server/javascript/yoman:ruby-1.9.3: (master)$ grunt
Running "jshint:all" (jshint) task
Linting app/scripts/main.js ...ERROR
[L54:C1] W117: 'define' is not defined.
define('can', [

Warning: Task "jshint:all" failed. Use --force to continue.

Aborted due to warnings.

Elapsed time
default     567ms
jshint:all  124ms
Total       691ms
对于我来说,在bower_组件中定制供应商库的正确方法是什么

这是我的main.js。此版本可以工作,但在起毛时失败

require.config({
    paths: {
        jquery: '../bower_components/jquery/jquery',
        bootstrapAffix: '../bower_components/sass-bootstrap/js/affix',
        bootstrapAlert: '../bower_components/sass-bootstrap/js/alert',
        bootstrapButton: '../bower_components/sass-bootstrap/js/button',
        bootstrapCarousel: '../bower_components/sass-bootstrap/js/carousel',
        bootstrapCollapse: '../bower_components/sass-bootstrap/js/collapse',
        bootstrapDropdown: '../bower_components/sass-bootstrap/js/dropdown',
        bootstrapPopover: '../bower_components/sass-bootstrap/js/popover',
        bootstrapScrollspy: '../bower_components/sass-bootstrap/js/scrollspy',
        bootstrapTab: '../bower_components/sass-bootstrap/js/tab',
        bootstrapTooltip: '../bower_components/sass-bootstrap/js/tooltip',
        bootstrapTransition: '../bower_components/sass-bootstrap/js/transition',
        can: '../bower_components/canjs/amd/can'
    },
    shim: {
        bootstrapAffix: {
            deps: ['jquery']
        },
        bootstrapAlert: {
            deps: ['jquery']
        },
        bootstrapButton: {
            deps: ['jquery']
        },
        bootstrapCarousel: {
            deps: ['jquery']
        },
        bootstrapCollapse: {
            deps: ['jquery']
        },
        bootstrapDropdown: {
            deps: ['jquery']
        },
        bootstrapPopover: {
            deps: ['jquery']
        },
        bootstrapScrollspy: {
            deps: ['jquery']
        },
        bootstrapTab: {
            deps: ['jquery']
        },
        bootstrapTooltip: {
            deps: ['jquery']
        },
        bootstrapTransition: {
            deps: ['jquery']
        }
    }
});

define('can', [
    'can/util/library',
    'can/control/route',
    'can/construct/proxy',
    'can/model',
    'can/view/mustache',
    'can/route'
], function(can) {
    'use strict';
    return can;
});


require(['app', 'jquery'], function (app, $) {
    'use strict';
    // use app here
    console.log(app);
    console.log('Running jQuery %s', $().jquery);
});

JSHint正在抱怨,因为require位于外部文件中。所有require函数都是在加载脚本之前定义的,但由于它们不在脚本中,JSHint认为它们是您忘记定义的自定义代码。这是一个简单的解决方案;添加一个predef配置,以便在JSHint开始整理文件之前,
define
require
已经传递给JSHint

  jshint: {
     options: {
        // all of your other options...
        predef: ['define', 'require']
     },
     files : ['app/scripts/main.js']
  },