网站搜索

node.js - 如何仅使用 TSC 正确导出 TypeScript 库用于 React 和 Node


我使用仅 TypeScript 和 tsc 编译创建了一个库,并使用 npm pack 打包为可导入的库。但是每当我安装该库,比如 npm install file:app-common-0.1.0.tgz 时,VS Code 会提示该库没有类型定义,因此无法自动导入。

我需要像 import {some-function} from 'app-commom/dist/src/index' 这样导入,仅仅是为了获得正确的导入和类型定义。

是否可以仅使用 TypeScript 和 tsc 来创建库?

我的设置:

tsconfig.json
{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "sourceMap": true,
    "allowJs": true,
    "declaration": true,
    "module": "esnext",
    "rootDir": "./",
    "outDir": "./dist",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": false,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "**/stories/"
  ]
}
package.json
{
  "name": "app-common",
  "main": "dist/src/index.js",
  "types": "dist/src/index.d.ts",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
   ....
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "ts-build": "tsc --project ./ --module commonjs",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
     ...
    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/node-logger": "^6.2.9",
    "@storybook/preset-create-react-app": "^3.1.7",
    "@storybook/react": "^6.2.9",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "tsc": "^2.0.3",
    "tslib": "^2.2.0",
    "typescript": "^4.2.4",
  },
  "typings": "dist/index.d.ts",
  "typescript": {
    "definition": "dist/index.d.ts"
  }
}