Webpack 导入的模块是一个空对象答案

【问题标题】：Webpack imported module is an empty objectWebpack 导入的模块是一个空对象
【发布时间】：2022-01-16 15:55:42
【问题描述】：

我想在我的 webpack/typescript 项目中使用“virtual-select-plugin”库。它没有类型定义。该库是通过 npm 安装的。在浏览器中出现错误：

TypeError: virtual_select_plugin__WEBPACK_IMPORTED_MODULE_13___default(...).init is not a function

Typescript 和 webpack 不会抱怨。

Webpack 生成所需的东西，就像它为 bootstrap、flickity 和其他运行良好的东西所做的那样：

...

/* harmony import */ var flickity__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! flickity */ "./node_modules/flickity/js/index.js");
/* harmony import */ var flickity__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(flickity__WEBPACK_IMPORTED_MODULE_2__);

...

/* harmony import */ var virtual_select_plugin__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! virtual-select-plugin */ "./node_modules/virtual-select-plugin/dist/virtual-select.min.js");
/* harmony import */ var virtual_select_plugin__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(virtual_select_plugin__WEBPACK_IMPORTED_MODULE_13__);

...

我注意到var flickity__WEBPACK_IMPORTED_MODULE_2__ 包含一个具有属性、函数等的对象，但var virtual_select_plugin__WEBPACK_IMPORTED_MODULE_13__ 只是一个空对象。来自 virtual-select-plugin 的代码稍后会在包中导入，并且是 "./node_modules/virtual-select-plugin/dist/virtual-select.min.js" 文件的内容。

我在 decs.d.ts 中添加了一个 typedef：

declare module 'virtual-select-plugin'

我使用以下方式导入插件：

import VirtualSelect from 'virtual-select-plugin';

并且想稍后调用init函数：

// Browser says no...
VirtualSelect.init({
  ele:     ...,
  options: ...,
});

我在 webpack 配置中添加了一个别名：

...

  resolve: {
    alias:      {
      'virtual-select-plugin': 'virtual-select-plugin/dist/virtual-select.min',
    },
    extensions: [
      '.js',
      '.jsx',
      '.ts',
      '.tsx',
    ],
  },

...

我现在搜索了 6 小时，但没有找到完成这项工作的解决方案。有人可以帮帮我吗？

【问题讨论】：

我想我找到了原因。缩小的 js 不导出任何东西。这只是普通的js。有人可以确认吗？

标签： typescript webpack

【解决方案1】：

我最终通过 dom 包含了缩小的 js，并通过 webpack 将所需的文件从 node_modules 复制到了 dist。

我找到了一个间接的“解决方案”。我不满意，因为它会随着更大的图书馆而变得乏味。但也许它可以帮助其他有小孩子的人。

tldr：基本上我是导入库的src文件，自己编译。

安装了依赖项popover-plugin 和popper-plugin（浏览器告诉我这个...见下文）
在 webpack 配置中更改/添加解析别名

  resolve: {
    alias:      {
      'virtual-select-plugin': 'virtual-select-plugin/src/virtual-select',
      'PopoverComponent':      'popover-plugin/src/popover',
      'PopperComponent':       'popper-plugin/src/popper',
    },
  ...
  }

在代码中需要它们（注意 VirtualSelect 周围的大括号）

import {VirtualSelect} from 'virtual-select-plugin';

require('PopoverComponent');
require('PopperComponent');

没有必要在声明中添加这两个额外的库，因为 typescript 不使用它们。

我是怎么做到的

我在某处得到提示，webpack 导入的库必须有导出（不确定）。 “virtual-select-plugin”的缩小版js没有。但是src文件（src/virtual-select.js）导出“VirtualSelect”。

我通过像上面那样更改 'virtual-select-plugin' 的别名将 webpack 指向该文件。因为没有默认导出，我不得不在 VirtualSelect import {VirtualSelect} ... 周围加上大括号

点击 F5 后，浏览器抱怨“缺少未定义的 PopoverComponent”。我查看了代码并注意到该组件的用法。因为它没有在某个地方定义，所以我检查了库的 package.json 并在那里找到了它。我将软件包安装为 dev 并将别名添加到此库中，并在我的项目代码中添加了一个 require（参见上面的步骤 2 和 3）。

再次点击 f5，浏览器提示“缺少 PopperComponent”。再次执行与 PopoverComponent 相同的操作。现在一切正常。

我很确定每个小型库都可以通过这种方式包含在内。但必须有更好的方法。但也许 webpack 无法导入纯 javascript？

【讨论】：