Question

我正在使用带有requirejs的yeoman webapp生成器，我已经使用bower安装了canjs。

canjs具有如下所示的目录结构

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目录中的供应商文件。

我试图在我的脚本dir中创建一个mycan.js构建，它看起来与bower_components中的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文件，我没有不想要。）

在使用1.1下的require docs http://requirejs.org/docs/api.html中，它有一个

的示例

•   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_components中制作供应商库的正确方法是什么？

这是我的main.js.这个版本有效，但在linting时失败。

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);
});

Answer 1

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

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

什么是在bower_components中定义供应商库的自定义构建的正确方法？

1 个答案: