我的 webpack 文件有什么问题？

Question

好的，让我们说 main.js，我有这个：

var topMenu = require('./menu.js');
console.log(topMenu.getCount()); // 1
topMenu.increment();
console.log(topMenu.getCount()); // 2

以及 menu.js，我有这个：

exports.currentTab = 0;

var count = 1;
exports.increment = function() { count++; };
exports.getCount = function() { return count; };

exports.showSearch = function () {
    $(".about-box").removeClass("active");
    $(".tele-box").removeClass("active");
    $(".tuts-box").addClass("active");

    $(".search-div").toggle();

    if (!$(".search-div").is(":visible")) {
        $(".tuts-box").removeClass("active");
    }

    currentTab = 1;
}

module.exports = [
exports.onKeyPressing = document.onkeypress = function(evt) {
if (evt.keyCode == 49) {
    console.log("Open 1st box");
        showTeles();
    }
if (evt.keyCode == 50) {
    console.log("Open 2nd box");
        showSearch();
    }
if (evt.keyCode == 51) {
    console.log("Open 3rd box");
        showAbout();
    }
}

];

我的 bundle.js 编译正确。那个，我知道。但是，打开访问页面，我在 main.js 行 console.log(topMenu.getCount()); // 1 上得到 Uncaught TypeError: undefined is not a function （bundle.js 因为它编译正确...）

然而，当我移除这个和里面的东西时：

module.exports = [
    ...
];

在 menu.js 的底部附近找到，然后它起作用了，我得到：

1
2

符合预期。我的文件有什么问题，我该如何解决？另外，我可能定义 exports.showSearch() 错误。总之，你能找到我在制作这个文件时犯的错误吗？谢谢。

Answer 1

exports 是 module.exports 的别名。因此，当您在这部分中将数组分配给 module.exports 时：

module.exports = [
    ...
];

您正在覆盖（清除）module.exports 中的值，因此 exports。所以所有这些分配都丢失了：

exports.currentTab = 0;

exports.increment = function() { count++; };
exports.getCount = function() { return count; };

exports.showSearch = function () {
  // ...
}

这就是您获得 Uncaught TypeError: undefined is not a function 的原因。没有附加到 exports（和 topMenu）的 getCount() 这样的函数。

更新

我不知道你想达到什么目的，但是删除对 module.exports 的分配可能 解决问题：

exports.onKeyPressing = document.onkeypress = function(evt) {
  // ...
}

同样，这取决于您想要实现的目标。

我的 webpack 文件有什么问题？

What's wrong with my webpack file?

javascript

webpack