magento 2でカスタムモジュールjsファイルをロードする方法

magento 2用のバナースライダーモジュールを作成しました。JSファイルを次の方法で呼び出し、正常に動作しました。ブロッククラスで次の関数を作成しました

public function getBaseJs($fileName){

        return $this->_storeManager->getStore()->getBaseUrl(
                \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
            ).'bannerslider/js/'.$fileName;
    }

この関数はbannerslider.phtml、次のようにファイルで呼び出されます。

<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery-1.7.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery.flexslider.js') ?>"></script>

しかし、require.jsHow do can do it itのjQuery依存メカニズムによると？

最後に、私は私のクエリの解決策を得ました。詳細は以下のとおりです。

ステップ1：下にモジュールjsファイルを追加する<Vendor>/<Module_Name>/view/<area>/web/js/

例えば <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

ステップ2：requirejs-config.js下にファイルを作成する<Vendor>/<Module_Name>/view/<area>/

例えば <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

次のコードを追加 requirejs-config.js

var config = {
    map: {
        '*': {
            bannerslider: 'VendorName_ModuleName/js/flexslider'
        }
    }
};

注：選択に応じてオブジェクト名を設定できます。私の場合、として設定しbannerslider、ファイル名に.js拡張子を追加しませんVendorName_ModuleName/js/flexslider

ステップ3：次の方法functionで、.phtmlファイル内のモジュールjsを呼び出します。

<script type="text/javascript">
    require(['jquery','bannerslider'],function($){
        $(window).load(function() {
            $('.flexslider-8').flexslider({
                animation: "fade",
                controlNav: "thumbnails",
                slideshowSpeed: 2000,
                minItems: 2,
                maxItems: 4
            });
        });

    });
</script>

私にとってはうまくいきます。

トレース：Netタブを使用して、ロードされたjsファイルのリクエストされたURLを確認します

私のやり方は：

ステップ1

レイアウト指示を使用して、拡張機能の基本JavaScriptファイルを含めます。

ステップ2

RequireJSを使用して、基本ファイルから拡張機能の他のJavaScriptファイルを要求します。

require(
    [
      'jquery', 
      '{VendorName}_{ModuleName}{path_to_js_file/relative_to/view/web/no_js_at_end}'
     // ex. Magento/Ui/view/base/web/js/grid/sticky/sticky.js
     // became Magento_Ui/js/grid/sticky/stick
    ], 
    function($, someOtherLibrary) {
        // custom code here...
    );
});