Package exports and eslint-plugin-import

2025-02-10

Package exports 與 eslint-plugin-import

我最近建立了一個擁有多個進入點的 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 問題，裡面建議改用 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 視為一個獨立的套件並正確解析。我也在自己的函式庫中的 library/some-import/package.json 加入了一個額外的 package.json：

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

結果一切都如預期般正常運作了！希望這能在你遇到類似問題時對你有所幫助。