モジュールが動作していないjqueryスクリプトをインポートしています。ヨーグルトジェネレーター

Question

私はこの質問がどこで始まり、どのように質問するのかは分かりません。しかしYeomanの発電機 - Yeogurt - を使って静的なウェブサイトを作っています。私はモジュール式の機能を使いましたが、私のjqueryを書く方法を失っています。彼らは、作成された各モジュールのjqueryファイルを持っています。私はそれを機能させるために何が欠けているのか分かりません。コードはマスタースクリプトファイルで正常に動作しますが、モジュールを使いたいので混乱の頭痛に苦しんでいます。

モジュール内で使用しているコードは次のとおりです。私が追加したコードは、文書の準備ができていない括弧の間にあり、それ以外の場合はすべてモジュールで生成されました。

おかげで、 ジョン

'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

モジュールファイルあなたは '厳格な使用' の下にこれを追加する必要が

第一。ビット：

import $ from 'jquery'; 

のでYeogurtこの生成：

'use strict'; 

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

     //jQuery won't work yet 
    } 
} 

をこれはjQueryを使って有効のようにそれが見えるものです：

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

main.jsがで

を提出しますあなたが持っているのに実際にサイトにロードするための注文メインの.jsファイルも編集してください。

'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(); 

});