Importieren von jquery-Skript mit Modul funktioniert nicht. Yeogurt Generator

Question

Ich bin nicht wirklich sicher, wo diese Frage beginnt oder wie man es fragt. Aber ich benutze einen Yeoman Generator - Yeogurt - um eine statische Webseite zu erstellen. Ich habe ihre modulare Funktion genutzt, aber ich weiß nicht, wie ich meine jQuery schreiben soll. Sie haben eine JQuery-Datei für jedes erstellte Modul und wenn ich meinen Code hineinlege, macht das nichts. Ich bin mir nicht sicher, was ich vermisse, um es funktionsfähig zu machen. Der Code funktioniert gut in der Master-Skript-Datei, aber ich möchte die Module verwenden, also ersparen Sie sich Kopfschmerzen von Unordnung.

Mein Code ich innerhalb des Moduls verwendet wird, ist unten. Der Code, den ich hinzufügte, befand sich zwischen den dokumentenfertigen Klammern, sonst wurde alles mit dem Modul generiert.

Danke, Jon

'use strict'; 

// Constructor 
var Sidebar = function() { 
    this.name = 'sidebar'; 
    console.log('%s module', this.name); 

    $(document).ready(function(){ 
    $('#sidebar-thumb').click(function(){ 
     $('#sidebar').toggleClass('open'); 
    }); 
    }); 

}; 

module.exports = Sidebar; 

Answer 1

Die Moduldatei

1. Sie diese unter dem 'use strict' hinzufügen müssen; Bit:

import $ from 'jquery'; 

So Yeogurt erzeugt dies:

'use strict'; 

export default class moduleName { 
    constructor() { 
     this.name = 'moduleName'; 
     console.log('%s module', this.name); 

     //jQuery won't work yet 
    } 
} 

Dies ist, wie es aussieht mit jQuery aktiviert:

'use strict'; 

import $ from 'jquery'; 

export default class moduleName { 
    constructor() { 
     this.name = 'moduleName'; 
     console.log('%s module', this.name); 

     //regular jQuery code can now go here 
     console.log($('body')); 
    } 
} 

Die main.js

Datei in Um es tatsächlich auf der Website zu laden, obwohl Sie auch haben um die Hauptdatei .js zu bearbeiten

'use strict'; 

//enables the use of jQuery 
import $ from 'jquery'; 

//imports your javascript module code ready for use 
//you need to add this bit manually 
import moduleName from '../_modules/moduleName/moduleName'; 

//initiates jQuery so that it can be used in all your modules 
$(() => { 

    //initiates moduleName code 
    //you need to add this bit as well 
    new moduleName(); 

});