javascript - 無法在 React 中使用 package.json 的 "exports" 導入模組

我正在嘗試將一個 (TypeScript) 套件匯入到一個 (TypeScript) React 專案中。這個模組在 package.json 文件中使用 exports 屬性來控制可以從中匯入的內容。但是，在我的 React 專案中，我無法使 exports 中匯出的路徑生效。相反，我可以從這個模組匯入任何東西。例如，我在 package.json 中使用 exports 匯出了一個路徑 ./certificate。但實際上導入時並不是這樣：

import {test} from "certificationtypes/certificate"

我需要導入如下內容：

import {test} from "certificationtypes/src/certificate"

（它還會暴露所有未使用 exports 指令導出的其他文件）。

這是該模組的 package.json：

{
  "name": "inputsvalidator",
  "version": "1.0.0",
  "description": "",
  "main": "./build/src/index.js",
  "exports": {
    "./certificate": "./build/src/certificate.js"
  },
  "scripts": {
    "build": "tsc",
    "prepare": "npm run build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "devDependencies": {
    "typescript": "^4.9.4"
  },
  "dependencies": {
    "@types/validator": "^13.7.10",
    "certificationtypes": "file:../certificationTypes",
    "countries": "file:../../../../../lib/shared/countries",
    "types": "file:../../../../../lib/shared/types",
    "validator": "^13.7.0"
  }
}

奇怪的是，這在 Node.js 項目中確實可行！那麼，我是否還需要做些額外的操作才能讓它在我的 React 項目中也能運行呢？我確實讀到過，這應該可以通過 webpack 支持。

我 React 專案的 package.json：

{
  "name": "front-end",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.11",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "certificationtypes": "file:../../lib/shared/certificationTypes",
    "countries": "file:../../../../lib/shared/countries",
    "inputsvalidator": "file:../../lib/shared/inputsValidator",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "react-spinners": "^0.13.7",
    "styled-components": "^5.3.6",
    "typescript": "^4.9.4",
    "validator": "^13.7.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/styled-components": "^5.1.26"
  },
  "proxy": "http://localhost:3003"
}

答案＃1

預設情況下，TypeScript 在導入套件時不會將 package.json 文件中的 "exports" 欄位視為參考。

在 TypeScript 4.7 或更新版本中，這個功能可以透過在編譯器選項中將 moduleResolution 設置為 "node16" 或 "nodeNext" 於當前專案中明確啟用（被 import 的套件無法強制執行此設定），例如。

// tsconfig.json
{
  ...
  "compilerOptions": {
    ...
    "moduleResolution": "node16",
    ...
  },
  ...
}

只要小心，這樣做可能會意外地破壞應用程式的其他部分，因為這時 package.json 中的其他設定也會開始發揮作用。