Как корректно подключить к проекту на vue.js свой npm-пакет с несколькими entrypoints
Я делаю свой проект на VUE 3 версии (+TS). Некоторые служебные классы я вынес в отдельную NPM-библиотеку. Библиотека у меня собирается в несколько JS файлов (для каждого класса свой) + все ехпорты из этих файлов реэкспортируются в 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 };
Файл package.json у библиотеки следующий:
// ..... Выше - стандартные поля
"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"
Проблема в следующем: Я устанавливаю свой NPM-пакет. Если я импортирую классы из index.js - все работает как надо. Но если я хочу конкретный класс из соответствующего файла импортировать - получаю ошибку в WebStorm Vue: Cannot find module my-services/transportService or its corresponding type declarations.
import { TransportService } from 'my-services';
// Так работает
import TransportService from 'my-services/transportService';
// Так получаю ошибку в WebStorm: Vue: Cannot find module my-services/transportService or its corresponding type declarations.
При этом билд приложения проходит, и все работает и в первом и во втором варианте! Но во втором варианте WebStorm подсвечивает импорт красным и не понимает типы, которые приходят из импортируемого модуля (что сводит на нет типизацию typescript).
Что я не так делаю? И как вообще правильно собирать/оформлять библиотеку с несколькими entrypoints? (Я в этом новичок, а мне еще надо сделать отдельную библиотеку компонентов, и там мне совсем тоже хочется разложить общие по смыслу группы компонентов в отдельные entrypoints).
P.S. Я находил описание подобной проблемы в интернете, и там предлагают в настройках Вебшторма Typescript/VUE установить параметр Vue Service в Vue Language Server (Volar). Я так и сделал, но мне это не помогло. :(
Также я установил в файле tsconfig.json
{
"compilerOptions": {
"moduleResolution": "NodeNext"
}
}
Но и это мне не помогло :(