Package exports and eslint-plugin-import

2025-02-10

包导出与 eslint-plugin-import

原文由 Alex O'Callaghan 于 2025-02-10 发布，订阅该博客

最近我在创建一个包含多个入口的 npm 包，使用 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"
}

这正是让它正常工作的关键，它让解析器将 msw/browser 视为一个独立的包，从而能够正确解析。我也在自己的库中额外添加了一个 package.json，路径为 library/some-import/package.json：

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

这样一切就都按预期正常工作了！如果你也遇到了类似的问题，希望这能对你有所帮助。

包导出与 eslint-plugin-import

评论