javascript - 无法在React中使用package.json "exports"导入模块

Question

我正在尝试将(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"
}

Answer 1

默认情况下，TypeScript 在导入包时不会考虑 package.json 文件中的 "exports" 字段。

在 TypeScript 4.7 或更高版本中，可以通过设置 moduleResolution 在编译器选项中显式启用此功能。到当前项目中的 "node16" 或 "nodeNext" (导入ed包无法执行此设置)，例如

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

请注意，这样做可能会意外破坏应用程序的其他部分，因为随后 package.json 中的其他设置也会开始发挥作用。