Package exports and eslint-plugin-import

2025-02-10

包导出与 eslint-plugin-import

最近，我在创建一个包含多个入口点（entrypoint）的新 npm 包。通过使用 Vite library mode（Vite 库模式），我配置了这些入口点：

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    lib: {
      entry: {
        library: "src/index.ts",
        "some-import": "src/some-import.ts",
      },
      name: "library",
    },
  },
});

然后，我在包的 package.json 文件中添加了 exports 字段：

{
  "name": "library",
  "main": "./dist/library.cjs",
  "module": "./dist/library.js",
  "types": "./dist/library.d.ts",
  "exports": {
    ".": {
      "types": "./dist/library.d.ts",
      "import": "./dist/library.js",
      "require": "./dist/library.cjs",
      "default": "./dist/library.cjs"
    },
    "./some-import": {
      "types": "./dist/some-import.d.ts",
      "import": "./dist/some-import.js",
      "require": "./dist/some-import.cjs",
      "default": "./dist/some-import.cjs"
    }
  }
}

接着，我尝试在另一个项目中使用这个包。虽然 TypeScript 能够解析该模块，但我在 eslint 中看到了错误：

error Unable to resolve path to module 'library/some-import' import/no-unresolved

我找到了这个 eslint-plugin-import issue，其中建议改用 eslint-import-resolver-typescript，但我不想为了使用这个包而强制其他项目修改配置。

我还注意到，在同一个项目中，我们导入 msw/browser 时，eslint 并没有提出任何问题，于是我决定看看 msw 是如何配置的。

// No complaints from eslint!
import { setupWorker } from "msw/browser";

msw 根目录下的 package.json 与我自己的配置相同，但包的根目录中还存在一个 browser 目录，其中另有一个 package.json：

// node_modules/msw/browser/package.json
{
  "main": "../lib/browser/index.js",
  "module": "../lib/browser/index.mjs",
  "types": "../lib/browser/index.d.ts"
}

这正是解决问题的关键：它帮助 resolver(解析器) 将 msw/browser 视为一个独立的包，从而正确完成解析。我在自己的库中的 library/some-import/package.json 添加了一个额外的 package.json：

{
  "main": "../dist/some-import.cjs",
  "module": "../dist/some-import.js",
  "types": "../dist/some-import.d.ts"
}

这样一来，一切都按预期运行了！如果你也遇到了类似问题，希望这篇文章能对你有所帮助。