无法在 React 中使用 package.json“导出”导入模块

Question

我正在尝试将 (typescript) package 导入到 (typescript) React 项目中。 此模块使用package.json文件中的exports属性来控制可以从中导入的内容。 但是，在我的 React 项目中，我无法使exports中导出的路径起作用。 相反，我可以从模块中导入任何东西。 因此，例如，我使用exports中的package.json ./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"来在编译器选项中显式启用此功能（import ed package 无法执行此设置），例如

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

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