Package exports and eslint-plugin-import

2025-02-10

Package exports 與 eslint-plugin-import

原文由 Alex O'Callaghan 于 2025-02-10 發布，訂閱此部落格

最近我在建立一個擁有多個進入點的 npm 套件。使用 Vite library mode，我這樣設定進入點：

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 當成一個獨立的套件來正確解析。我也在自己的函式庫中，於 library/some-import/package.json 新增了一個額外的 package.json：

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

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

Package exports 與 eslint-plugin-import

留言