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"
}
}