4

私はgrunt-browserifyを使用しており、特に 2 つの問題に直面しています。タスクは、次の構成オプションを使用して正常に実行されています。この変数jsFilesToConcatは、Backbone.js + Marionette.js アプリケーションのすべての JavaScript ファイル、メイン アプリケーション定義、フロントエンド ユーティリティ アセット (Bootstrap プラグインなど)、およびプロジェクトに関連付けられたすべての JS を表します。これは間違ったアプローチですか？250k の JS アプリケーション全体 (およびそのすべての依存関係) を一度にロードすることを考えました。

これは私にとって新しい領域であるという免責事項を提供したいので、意図したユースケースはプラグインで既に利用可能なオプションで利用できると思いますが、2 つのエラーで混乱しています:

1) Backbone not defined- これは、スクリプトが実際にロードされていることを意味しますが、Chrome Dev Tools でコール スタックを調べると、匿名の自己呼び出し関数のみが表示されます。そのため、Backbone オブジェクトを Marionette に渡してロード時に拡張する方法がよくわかりません。

2) require is not defined- 宣言している行にエラーがありますvar SampleApp = require('SampleApp')。require関数を公開するために、grunt 構成または node.js server.js 構成内で何か特別なことをする必要がありますか?

3) javascript はそれ自体で非同期に実行されていますか? browserify のこの部分は、私が適切に処理していない意図した動作ですか? 名前空間を保護するために多くの JS ユーティリティをグローバルラッパーでラップしているため、一部の機能が利用できない理由だと思いますが、それがなぜ影響するのかはわかりませんrequire。

    // uses grunt-browserify task
    browserify: {
        developmentJs: {
            options: {
                debug: true,
                alias: ["./js/app.dev.js:SampleApp"],
            },
            src: [
                '<%= pkg.jsFilesToConcat %>'
            ],
            dest: 'public-dev/js/app.dev.js'
        }
    }

そして、index.html私の単一ページの Marionette アプリで、私は持っています。 

    (function ($) {
        $(document).ready( function() {
            var sampleApp = require('SampleApp');
            console.log( SampleApp );
        });
    })(jQuery);
4

1 に答える 1

0

まず第一に、grunt ファイルの src 属性は、アプリケーション内のすべてのファイルを参照する必要はありません。エントリポイントのみが必要です。したがって、通常、index.js ファイルに匿名の自己実行関数に似たものがあり、src 構成オプションを に設定します["./index.js"]。browserify がそのファイルを見ると、require への呼び出しがチェックされ、必要なすべての依存関係が取得されます。

そうは言っても、browserify は require の内部定義を持つファイルを生成します。require 関数は、ページ上でグローバルに使用できません。また、require に含める依存関係も使用できません。アプリケーションでそれらを使用できますが、ページで使用できるようにはなりません。したがって、Backbone is not defined エラーが発生した場合、最初に確認することは、npm ( npm install backbone --save) 経由でバックボーンがインストールされていることです。

すべての設定が完了したら、コンパイル済みのスクリプトをページにインクルードし、匿名の自己実行関数 (grunt-browserify が処理するファイルにあるはずです) にアプリケーションを開始する作業を行わせる必要があります。

于 2014-07-19T00:04:05.873 に答える