Wie lade ich eine benutzerdefinierte Modul-JS-Datei in Magento 2?

Ich habe ein Banner-Slider-Modul für Magento 2 erstellt. Ich habe die JS-Datei auf folgende Weise aufgerufen und sie funktioniert einwandfrei. In der Blockklasse habe ich folgende Funktion erstellt

public function getBaseJs($fileName){

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

und diese Funktion wird in der bannerslider.phtmlDatei wie folgt aufgerufen .

<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>

Aber laut jQuery-Abhängigkeitsmechanismus von require.jsWie kann ich das machen?

Endlich habe ich die Lösung für meine Anfrage bekommen. Ich möchte es im Detail wie unten teilen.

Schritt 1: Fügen Sie Ihre Modul-JS-Datei unter hinzu<Vendor>/<Module_Name>/view/<area>/web/js/

z.B <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

Schritt 2:requirejs-config.js Datei erstellen unter<Vendor>/<Module_Name>/view/<area>/

z.B <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

Fügen Sie folgenden Code hinzu requirejs-config.js

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

Hinweis: Sie können Ihren Objektnamen nach Ihren Wünschen festlegen. In meinem Fall habe ich die bannersliderErweiterung .js als Dateiname in festgelegt und füge sie nicht hinzuVendorName_ModuleName/js/flexslider

Schritt 3: Rufen Sie die Datei functionIhres Moduls js in der .phtmlDatei wie folgt auf.

<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>

Es funktioniert gut für mich.

Trace: Verwenden Sie die NetRegisterkarte, um die angeforderte URL der geladenen JS-Datei anzuzeigen oder nicht.

Mein Weg ist:

Schritt 1

Fügen Sie die Basis-Javascript-Datei einer Erweiterung mithilfe von Layoutanweisungen ein.

Schritt 2

Fordern Sie die anderen Javascript-Dateien der Erweiterung aus der Basisdatei mit RequireJS an:

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...
    );
});