无法解析 package.json 的“exports”字段中指定的模块

Question

我正在开发一个 JS Web 应用程序，并尝试使用 package.json 文件中的 exports 字段来清理我的模块的导入语句。

这是我的目录结构：

--> my-package-folder
   --> src
      --> index.js
      --> color
         --> index.js
     --> ui
        --> index.js

我希望能够像这样导入 color 和 ui 子文件夹：

import * from '@project/my-package/color'
import * from '@project/my-package/ui'

// Instead of...
// import * from '@project/my-package/src/color/index.js'
// import * from '@project/my-package/src/ui/index.js'

这是我的 package.json 中的一个 sn-p：

  "name": "@project/my-package",
  "version": "1.0.0",
  "main": "./src/index.js",
  "type": "module",
  "exports": {
    "./color": "./src/color/index.js",
    "./ui": "./src/ui/index.js"
  },

出于某种原因，我在尝试导入 color 或 ui 子文件夹时遇到“无法解决”错误：

Module not found: Error: Can't resolve '@project/my-package/color'

导入my-package的代码仍然可以导入@project/my-package，解析为./src/index.js（在main字段中指定）：

import * from '@project/my-package'    // This works

它只是导入 color 和 ui 子文件夹，这是一个问题。

作为测试（只是为了看看会发生什么），我删除了 main 字段并将其值放在 exports 字段中：

".": "./src/index.js"

我想如果exports 字段被正确读入，那么这个更改应该仍然允许导入 @project/my-package 工作。但这实际上导致@project/my-package 不再可解析。

我注意到 exports 字段上有相当多的文档是针对 node.js 应用程序的。由于我没有从事 node.js 项目，我想知道这是否与我的问题有关。在浏览器中工作时，exports 字段的行为可能有所不同。

还有什么我想念的吗？目前，我正在运行使用webpack-dev-server 在本地导入my-package 的应用程序。也许我的 webpack 配置文件中的某些内容也需要更新？

Answer 1

您的index.js 文件是否从包中导入其他模块？如果是这种情况，您需要引用这些模块 using package.json imports 字段。