javascript - Hur man korrekt skapar ett npm-paket med flera ingångspunkter
Jag skriver mitt eget projekt på VUE version 3 (+TS). Jag flyttade några hjälparklasser till ett separat NPM-bibliotek. Mitt bibliotek är sammansatt i flera JS-filer (en för varje klass) + alla exports från dessa filer exporteras om till index.js:
import StorageService from './lib/storageService';
import TransportService from './lib/transportService';
import TokenService from './lib/tokenService';
import AuthService from './lib/authService';
const myServices = {
StorageService,
TransportService,
TokenService,
AuthService,
};
export { myServices as default, StorageService, TransportService, TokenService, AuthService };
Bibliotekets package.json-fil är som följer:
// .....
"type": "module",
"files": [
"src",
"dist/*",
"index.d.ts",
"auth-service.d.ts",
"token-service.d.ts",
"storage-service.d.ts",
"transport-service.d.ts"
],
"exports": {
".": {
"import": "./dist/index.js",
"type": "./dist/index.d.js"
},
"./authService": {
"import": "./dist/auth-service.js",
"type": "./dist/auth-service.d.js"
},
"./tokenService": {
"import": "./dist/token-service.js",
"type": "./dist/token-service.d.js"
},
"./storageService": {
"import": "./dist/storage-service.js",
"type": "./dist/storage-service.d.js"
},
"./transportService": {
"import": "./dist/transport-service.js",
"type": "./dist/transport-service.d.js"
}
},
"main": "./dist/index.js",
"module": "./dist/index.js"
Jag installerar mitt NPM-paket. Om jag importerar klasser från index.js fungerar allt som det ska. Men om jag vill importera en specifik klass från motsvarande JS-fil från mitt bibliotek får jag ett fel i WebStorm: Vue: Kan inte hitta modul my-services/transportService eller dess motsvarande typdeklarationer.
import { TransportService } from 'my-services';
// First version: This works
import TransportService from 'my-services/transportService';
// Second version: In this case, I get an error in WebStorm: Vue: Cannot find module my-services/transportService or its corresponding type declarations.
I det här fallet passerar applikationsbygget, och allt fungerar i båda: den första och andra versionen! Men i det andra alternativet markerar WebStorm importen och förstår inte de typer som kommer från den importerade modulen (vilket upphäver TypeScript-typningen).
Vad gör jag fel? Och vad är det rätta sättet att sätta ihop/designa ett bibliotek med flera ingångspunkter? (Jag är ny på detta, och jag behöver fortfarande göra ett separat bibliotek av komponenter, och där vill jag också verkligen dela upp grupper av komponenter som är vanliga i betydelse i separata ingångspunkter).
Jag hittade en beskrivning av ett liknande problem på Internet, och de föreslår att man ställer in Vue Service-parametern i Vue Language Server (Volar) i Typescript/VUE-inställningarna i Webstorm. Jag gjorde det, men det hjälpte mig inte. :(
Jag satte också i filen tsconfig.json:
"compilerOptions": {
"moduleResolution": "NodeNext",
.....
}
Men det hjälpte mig inte heller