如何在 Webpack 项目中正确导出 javascript 模块答案

【问题标题】：How to correctly export a javascript module in Webpack project如何在 Webpack 项目中正确导出 javascript 模块
【发布时间】：2020-08-09 12:24:50
【问题描述】：

我目前在 webpack 中导出模块时遇到问题。我已经能够导出包含以下功能的简单模块：

let getEle = function(item) {
    return document.getElementById(item);
};

module.exports = {
    getEle: getEle
};

在我的 main.js 中，我会像这样导入它：

import { getEle } from './helper.js';

这没有任何问题。但是，我试图导出我找到的自定义 datePicker（即 FooPicker：https://github.com/yogasaikrishna/foopicker）：

var FooPicker = (function () {
    // code
    function FooPicker() {
        // code
    }
    return FooPicker;
})();

// my attempt at exporting the entire FooPicker module

module.exports = {
    FooPicker: FooPicker
}

我尝试在我的 main.js 中像这样导入它：

import FooPicker from './fooPicker.js'

我尝试使用该模块（如果我只是在演示 HTML 文件中调用该函数，这将按预期工作）：

let foopicker2 = new FooPicker({
  id: 'datepicker2'
});

但这不起作用，我看到以下错误：

Uncaught TypeError: FooPicker is not a constructor

我在使用 Webpack 方面的经验有限，并且我进行了相当多的搜索，但我仍然无法找到与我的问题相关的内容。我在这里做错了什么，我能做些什么来纠正它？

【问题讨论】：

你想要return FooPicker而不是return FooPicker()吗？我什至不确定你为什么需要这个匿名函数，但请检查这个更改。
对不起，那些括号不应该在那里。我删除了它们，我仍然看到同样的错误。将编辑 OP。
你在FooPicker()函数中使用thisconspect吗？
是的，我确实在 FooPicker 函数中使用了this。代码可以在这里找到：github.com/yogasaikrishna/foopicker/blob/master/foopicker.js。在 OP 中发帖有点太长了。
如果您尝试其他导出，我真的不知道解决方案。看看这个：stackoverflow.com/a/56375245/8415007

标签： javascript webpack

【解决方案1】：

你的案子是export

var FooPicker = (function () {
    // code
    function FooPicker() {
        // code
    }
    return FooPicker;
})();

var fooPicker = new FooPicker()
console.log(fooPicker)

尝试：

module.exports = FooPicker

const FooPicker = require('./fooPicker.js')
var fooPicker = new FooPicker()

这会起作用

【讨论】：