index.d.ts 存在，但在 npm install 后未被拾取

Question

我有一个 vite Reactjs TypeScript 组件库，已发布到 npm，但是在使用 npm install 将其安装到新项目中后，我收到此警告并且无法编译：

Could not find a declaration file for module 'c-forms'. 'app/node_modules/c-forms/dist/c-forms.es.js' implicitly has an 'any' type.
  There are types at 'app/node_modules/c-forms/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'c-forms' library may need to update its package.json or typings.

我的package.json是

    {
  "name": "c-forms",
  "version": "0.0.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "jest --config=jest.config.cjs"
  },
  "files": [
    "dist"
  ],


  "exports": {
    ".": {
      "import": "./dist/c-forms.es.js",
      "require": "./dist/c-forms.umd.js"
    },
    "./dist/style.css": "./dist/style.css",
    "./dist/index.d.ts": "./dist/index.d.ts"
  },
  "main": "./dist/c-forms.umd.js",
  "module": "./dist/c-forms.es.js",
  "types": "./dist/index.d.ts",
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "dependencies": {
   
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^14.2.1",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.12",
    "@types/react": "^18.2.64",
    "@types/react-dom": "^18.2.21",
    "@types/react-icons": "^3.0.0",
    "@types/uuid": "^9.0.8",
    "@types/validator": "^13.11.9",
    "@typescript-eslint/eslint-plugin": "^7.1.1",
    "@typescript-eslint/parser": "^7.1.1",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.18",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "path": "^0.12.7",
    "postcss": "^8.4.36",
    "tailwindcss": "^3.4.1",
    "ts-node": "^10.9.2",
    "typescript": "^5.2.2",
    "vite": "^5.1.6",
    "vite-plugin-dts": "^3.7.3",
    "vite-plugin-lib-inject-css": "^2.0.0",
    "vite-tsconfig-paths": "^4.3.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "declaration": true,
    "declarationMap": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react-jsx",
    "noImplicitAny": false,
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "dist/index.d.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.js

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
  },
  "include": ["vite.config.ts","package.json"],
}

vite 配置是

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import dts from 'vite-plugin-dts'
import tsconfigPaths from "vite-tsconfig-paths";
import * as packageJson from './package.json'
import { resolve } from "node:path";

import { libInjectCss } from 'vite-plugin-lib-inject-css';


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths(),
    libInjectCss(),
    dts({
      insertTypesEntry: true,
      rollupTypes: true,
    }),
  
  ]


  build: {
    lib: {
      entry: resolve('src', 'index.ts'),
      name: 'CForms',
      formats: ['es', 'umd'],
      fileName: (format) => `c-forms.${format}.js`,
    },
    rollupOptions: {
      external: [...Object.keys(packageJson.peerDependencies), 
        "react", "react-dom"],
        output: {
          globals: {
            react: "React",
            "react-dom": "ReactDOM"
          },
        },
    },
    sourcemap: true,
    emptyOutDir: true,
  },
})

我可以看到生成的 es 和 umd，以及带有所有声明的 index.d.ts 文件，但不确定客户端应用程序不能使用该库。

Answer 1

改变：

  "exports": {
    ".": {
      "import": "./dist/c-forms.es.js",
      "require": "./dist/c-forms.umd.js"
    },
    "./dist/style.css": "./dist/style.css",
    "./dist/index.d.ts": "./dist/index.d.ts"
  },

以下。

  "exports": {
    ".": {
      "import": "./dist/c-forms.es.js",
      "require": "./dist/c-forms.umd.js",
      "types": "./dist/index.d.ts"
    },
    "./dist/style.css": "./dist/style.css",
    "./dist/index.d.ts": "./dist/index.d.ts"
  },

这确保了捆绑器等知道哪个类型定义文件与该块中定义的其他文件相关。