Webpack 无法从包的子目录中解析模块答案

【问题标题】：Webpack cannot resolve modules from subdirectory of a packageWebpack 无法从包的子目录中解析模块
【发布时间】：2017-05-11 07:39:56
【问题描述】：

我有一个包正在构建到名为lib 的目录中。结构如下：

- lib/
-- moduleA/
---- index.js
-- moduleB/
---- index.js
- src/
-- moduleA/
-- moduleB/

在package.json 我指定：

"main": "./lib"

在另一个项目中，我尝试从上面的包中导入特定模块，如下：

import moduleA from '@scope/packageA/moduleA';

但是 Webpack 无法解析模块，说：

找不到模块：错误：无法解析“@scope/packageA/moduleA”

但是，如果我直接从lib 导入，它确实有效：

import moduleA from '@scope/packageA/lib/moduleA;

为什么会这样？我的理解是 Webpack 尊重包的 main 条目，并且应该可以从入口点开始从层次结构中的任何位置导入。

【问题讨论】：

main 只是一个指向单个入口点文件的指针：@scope/packageA/lib/index.js 大概。它不能是目录，因此您不能向导入添加路径并期望它相对于它被解析。你的第二个import 是正确的。

【解决方案1】：

我可能晚了几年，但如果有人需要一个可能的答案：

您可以使用package.json 中的exports 字段来定义哪些目录解析到哪些模块，使用问题中的示例，您可能想要这样的内容：

// package.json
{
  ...
  "exports": {
    "./moduleA": "./lib/moduleA/index.js",
    "./moduleB": "./lib/moduleB/index.js",
  },
}

这将帮助 Node 正确解析包导入，并从以下位置“翻译”它：

import moduleA from '@scope/packageA/moduleA';

到：

import moduleA from '@scoppe/packageA/lib/moduleA/index.js';

请注意，这适用于 Node v12+，之前的任何版本都将使用 main 字段作为包的条目。

还有更多内容，因为您可以有条件地指定入口点并将它们用于具有不同 Javascript 格式（CommonJS 和 EMS）的构建，请务必查看 documentation

【讨论】：