2

私はrequirejsでyeoman webappジェネレーターを使用しており、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 ディレクトリ内のベンダー ファイルを編集していることを意味します。

スクリプト ディレクトリ内に mycan.js ビルドを作成しようとしましたが、これは bower_components の can.js ファイル (口ひげの依存関係の変更を除く) と同じように見えます。次に、config を次のように変更します。

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 ファイルを含む) ）。

要求ドキュメントhttp://requirejs.org/docs/api.htmlの使用法 1.1 には、次の例があります。

•   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です。このバージョンは機能しますが、リンティング時に失敗します。

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

require が外部ファイルにあるため、JSHint が不平を言っています。すべての require の関数は、スクリプトが読み込まれる前に定義されますが、それらはスクリプト内にないため、JSHint は定義を忘れたカスタム コードであると認識します。これは簡単に修正できます。ファイルのlintを開始する前に、がすでにJSHintに渡されるように、事前定義構成を追加します。definerequire

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