我正在尝试在typescript和以下设置中构建一个小的组件包:
root
src
index.ts
components
ExampleComponent.tsx
ui
index.ts
Button
index.tsx
因此在我的 /src/index.ts 中,我尝试了以下操作:
export { default as ExampleComponent } from './components/example'
并在我的 /src/components/ui/index.ts 中:
export { default as Button } from './Button'
因此在我的项目中,我可以使用这些组件,例如
import { ExampleComponent } from 'test-package'
import { Button } from 'test-package/dist/components/ui'
一切正常且符合预期- !!但!!
我真正想要的是将自己的ui组件称为:
import { Button } from 'test-package/ui'
最后几天我真的想弄清楚自己的意思,所以我读到了有关 baseUrl和路径和 rootDirs 的信息,但老实说,我只是像无头鸡一样尝试了一下并最终得到:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": true,
"outDir": "./dist",
"strict": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"baseUrl": ".",
"paths": {
"test-package/ui": ["./dist/components/ui"]
},
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strictNullChecks": false,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": false,
"sourceMap": true,
"jsx": "react",
"noImplicitAny": false,
"experimentalDecorators": true
},
"include":
[
"src"
],
"exclude": [
"node_modules",
"**/__tests__/*",
"/dist"
]
}
这仍然没有导致我想要的
为了完整起见,这是我的package.json:
{
"name": "test-package",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"types": "dist/index.d.js",
"scripts": {
"test": "jest --config jestconfig.json",
"build": "rm -rf ./dist && tsc",
"lint": "eslint --fix ./src/** --rule 'no-console: [warn, { allow: [warn, error] }]'"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/jest": "^24.0.11",
"@types/react": "^16.8.13",
"@typescript-eslint/eslint-plugin": "^1.6.0",
"@typescript-eslint/parser": "^1.6.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-config-standard-react": "^7.0.2",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-promise": "^4.1.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.6.0",
"eslint-plugin-standard": "^4.0.0",
"jest": "^24.7.1",
"ts-jest": "^24.0.2",
"tslint": "^5.16.0",
"tslint-config-prettier": "^1.18.0",
"typescript": "^3.4.3"
},
"peerDependencies": {
"react": ">= 16.8.0",
"react-dom": ">= 16.8.0"
},
"files": [
"dist/**/*"
]
}