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

模块文件

首先你需要在＆＃39; use strict＆＃39;下面添加它。位：

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 Enabled的样子：

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

});

导入jquery脚本，模块无法正常工作。 Yeogurt Generator

1 个答案: