正在导入带有模块的jquery脚本.Yeogurt发电机

Question

我真的不确定这个问题从哪里开始，也不知道如何问。但我正在使用Yeoman生成器——Yeogurt——来创建一个静态网站。我已经使用了他们的模块化功能，但不知道如何编写jquery。他们为创建的每个模块都有一个jquery文件，当我把代码放在里面时，它什么都不做。我不确定我缺少了什么来使它发挥作用。代码在主脚本文件中运行良好，但我想利用这些模块，这样就不用担心混乱了。

我在模块中使用的代码如下。我添加的代码位于文档就绪的括号之间，否则所有内容都是用模块生成的。

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

模块文件

首先，你需要在"use strict"下面加上这个；位：

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