2

我正在使用带有 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 目录中的供应商文件。

我试图在我的脚本目录中创建一个 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 与路径配置中的应用程序。

如果我在包含 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);
});
4

1 回答 1

1

JSHint 抱怨，因为 require 在外部文件中。所有 require 的函数都是在你的脚本加载之前定义的，但是因为它们不在脚本中，JSHint 认为它们是你忘记定义的自定义代码。这是一个简单的解决方法；添加一个predefdefine配置，以便require在 JSHint 开始检查您的文件之前已经将其传递给 JSHint。

  jshint: {
     options: {
        // all of your other options...
        predef: ['define', 'require']
     },
     files : ['app/scripts/main.js']
  },
于 2013-10-06T10:44:13.563 回答