0

完全な Web アプリを作成し、HTML ドキュメントの最後にある次の行で require を使用してブートストラップします。

<script src="js/vendor/require-2.1.6.min.js" data-main="js/main.js"></script>

main.js 内で、次の 2 つの関数を使用してアプリを宣言します。

requirejs.config({

    paths: {
        'jquery': 'vendor/jquery-1.9.1.min',
        'lodash': 'vendor/lodash-1.3.1.min',
        'knockout': 'vendor/knockout-2.2.1.min',
        'bootstrap': 'vendor/bootstrap-2.3.2.min'
    },
    shim: { 'bootstrap': { deps: ['jquery'] } }
});

requirejs(dependencies, function main(dependencies) { ... });

ここで、アプリを jQuery プラグインとして移植したいと考えています。そのため、私が望む最終結果は、アプリを jQuery fn でラップすることです。

(function($) { $.fn.myPlugin = function() { ... }; }(jQuery));

コードをモジュール化して単一の js ファイル (plugin-1.0.0.min.js) にコンパイルし、AMD の有無にかかわらず別のプロジェクトにコードを含め、次を使用してアプリを div にロードします

$('#pluginDiv').myPlugin({ options: {} });

まず、アプリをモジュラー コンポーネントとしてパッケージ化するには、requirejs/requirejs.config 関数を宣言に変更する必要がありますか? それとも、このままアプリを終了しますか? 構成はどうですか？

次に、プラグイン ユーザーが使用する jQuery (たとえば、グローバル スコープで宣言されているもの) にプラグインを公開するにはどうすればよいですか? AMD を使用している場合、これは機能しますか?

アップデート

質問 1 では、requirejs.config をビルド ファイル build.js に移動しました。これには、いくつかの追加プロパティが必要です。

({
    baseUrl: ".",
    paths: {
        'jquery': 'vendor/jquery-1.9.1.min',
        'lodash': 'vendor/lodash-1.3.1.min',
        'knockout': 'vendor/knockout-2.2.1.min',
        'bootstrap': 'vendor/bootstrap-2.3.2.min'
    },
    shim: { 'bootstrap': { deps: ['jquery'] } },
    optimize: "none", // for debug
    name: "main",
    out: "plugin.js"
})

r.js を使用してこれをコンパイルできましたが、うまく機能します。

しかし、私はまだ質問 2 で立ち往生しています。コンパイルした myPlugin.js のコードは次のとおりです。

requirejs(dependencies, function main(dependencies) {
    (function($) {

        $.fn.myPlugin = function(options) {

            ...

            return this;
        };
    })(jQuery);
});

ここで、依存関係には jQuery は含まれません。次に、次のように呼び出してアプリをブートストラップします。

<script src="js/vendor/require-2.1.6.min.js" data-main="js/app.js"></script>

そして app.js のコードは

requirejs.config({
    paths: { 'jquery': 'vendor/jquery-1.9.1.min' },
    shim: { 'myPlugin': ['jquery'] }
});

requirejs(['jquery','myPlugin'], function main($) {
    $('#plugin').myPlugin(options);
});

ただし、私のコードは常に (app.js から) プラグインをバインドしようとし、プラグインが jQuery のメソッドでない場合は失敗し、コンパイルされたプラグイン コードをロードして jQuery でメソッドを作成します。ここで何が問題なのですか??

更新 2

そこで、requirejs とそのオプティマイザーを使用してモジュール式の JavaScript ファイル plugin.js を作成しました。コンパイルされたプラグイン スクリプトのメイン コード、

requirejs(dependencies, function main(dependencies) {
    (function($) {
        $.fn.plugin = function(options) { return this; }
    })(window.jQuery);
);

親アプリのメイン コードの後まで呼び出されません。

requirejs(['jquery','plugin'], function main($) {
    $('#plugin').plugin({});
});

これは、両方がrequirejsを呼び出しているためだと思います。したがって、ここでの問題は、AMD ローダー内で使用できるようにプラグインを作成する方法です。

申し訳ありませんが、私はまだ適切な質問を考えています。

4

1 に答える 1