Как сделать aliases доступными при установке пакета?
Есть пакет написанный мной.
в package.json задал entry point для экспорта классов и логики.
"main": "./src/index.js"
И не подтягиваются в проект элементы экспортируемые из index.js с использованием alias
export { something } from "@/something.js" // не экспортируется export { something } from "./path/to/something.js" // все ок |
export { something } from "@/something.js" // не экспортируется export { something } from "./path/to/something.js" // все ок
в package.json пакета указал
"@/*": "./path/to"
В проекте в котором использую пакет юзаю Vite в качестве сборщика.
Дополнительно:
Не очень понятно, где проблема - под алиасами тут будто бы понимаются одновременно именованные экспорты из пакетов и одновременно алиасы для импорта внутри самого приложения.
Если у вас внешний пакет (иначе непонятно, причём тут `main` в `package.json`), и вам нужно сделать экспорт конкретного файла по "короткому" пути, то следует оформить так:
// package.json вашего пакета, допустим, "mypackage" { "name": "mypackage", "exports": { ".": "./dist/index.js", "./whatever/": "./dist/whatever/non-index.js" } } |
// package.json вашего пакета, допустим, "mypackage" { "name": "mypackage", "exports": { ".": "./dist/index.js", "./whatever/": "./dist/whatever/non-index.js" } }
Важно: это минимальная версия, там есть тонкости относительно разного экспорта ESM, CJS и d.ts файлов, но тут такой вопрос не стоит.
Если у вас есть такой пакет, то в другом пакете, в который вы установили его как зависимость, вы можете импортировать по "короткому" пути:
// "Короткий" импорт, без него пришлось бы делать что-то вот такое: // import { whatever } from 'mypackage/dist/whatever/non-index.js'; import { whatever } from 'mypackage/whatever'; |
// "Короткий" импорт, без него пришлось бы делать что-то вот такое: // import { whatever } from 'mypackage/dist/whatever/non-index.js'; import { whatever } from 'mypackage/whatever';
---
Если речь идёт о том, чтобы использовать алиасы внутри одного проекта, то следует сконфигурировать алиасы в `vite.config.ts`, документация вот здесь, выглядеть будет примерно так:
// vite.config.ts import { fileURLToPath, URL } from 'node:url'; export default defineConfig({ resolve: { alias: [ { find: '~components', replacement: fileURLToPath(new URL('./src/components', import.meta.url)) }, ], }), |
// vite.config.ts import { fileURLToPath, URL } from 'node:url'; export default defineConfig({ resolve: { alias: [ { find: '~components', replacement: fileURLToPath(new URL('./src/components', import.meta.url)) }, ], }),
И в `(js|ts)config.json`, при наличии, добавить:
{ "compilerOptions": { "paths": { "~components/*": ["./src/components/*"] } } } |
{ "compilerOptions": { "paths": { "~components/*": ["./src/components/*"] } } }
- На мой вопрос вы попробовали ответить в первой части. Под alias понимается сокращение для путей. Но ваш вариант не подходит. В приложении из моего пакета я импортирую:
import { component } from 'my-package';
В моем пакете я указал main файлик и его оформил как public api;
То есть я реэкспортирую штуки из пакета из этого файлика.
Ранее во время написания пакета я юзал сокращенные пути например:import { func } from 'libs/func.js' /* import { func } from '../libs/func.js' если юзать относительные пути */
import { func } from 'libs/func.js' /* import { func } from '../libs/func.js' если юзать относительные пути */
И если юзать относительные пути, то когда я юзаю пакет в приложении все работает.
Но не хотелось бы переписывать все пути на относительные.
То что вы описали как:{ "name": "mypackage", "exports": { ".": "./dist/index.js", "./whatever/": "./dist/whatever/non-index.js" } }
{ "name": "mypackage", "exports": { ".": "./dist/index.js", "./whatever/": "./dist/whatever/non-index.js" } }
Я описал
"exports": { "libs": "./src/libs", }
"exports": { "libs": "./src/libs", }
-
"paths": { "src/*": [ "src/*" ], "app/*": [ "*" ], "components/*": [ "src/components/*" ], "layouts/*": [ "src/layouts/*" ], "pages/*": [ "src/pages/*" ], "assets/*": [ "src/assets/*" ], "boot/*": [ "src/boot/*" ], "shared/*": [ "src/shared/*" ], "entities/*": [ "src/entities/*" ], "features/*": [ "src/features/*" ], "widgets/*": [ "src/widgets/*" ], "stores/*": [ "src/stores/*" ], "vue$": [ "node_modules/vue/dist/vue.runtime.esm-bundler.js" ] }
"paths": { "src/*": [ "src/*" ], "app/*": [ "*" ], "components/*": [ "src/components/*" ], "layouts/*": [ "src/layouts/*" ], "pages/*": [ "src/pages/*" ], "assets/*": [ "src/assets/*" ], "boot/*": [ "src/boot/*" ], "shared/*": [ "src/shared/*" ], "entities/*": [ "src/entities/*" ], "features/*": [ "src/features/*" ], "widgets/*": [ "src/widgets/*" ], "stores/*": [ "src/stores/*" ], "vue$": [ "node_modules/vue/dist/vue.runtime.esm-bundler.js" ] }
Так выглядят пути в jsconfig.js, которые я юзал во время создания пакета. Ну и конфиг vite примерно также.
Просто я писал проект, а сейчас решил много всего использовать на другом проекте, поэтому решил сделать из этого просто пакет. Весь пакет в одной папочке, но не хочется юзать в этой папочке относительные пути. - Tdvist,
Это неправильный формат
"exports": { "libs": "./src/libs" }
"exports": { "libs": "./src/libs" }
Должно быть так:
"exports": { "./libs": "./src/libs.js" }
"exports": { "./libs": "./src/libs.js" }
Также не уверен, что будет работать без "основного" экспорта (даже если работает, считал бы это плохой практикой).
Так что лучше вообще вот так:"exports": { ".": "./src/index.js", "./libs": "./src/libs.js" }
"exports": { ".": "./src/index.js", "./libs": "./src/libs.js" }
Настройки `tsconfig.json` после вашего уточнения значения не имеют, это только для вашей IDE, а не для компилятора
- Максим Морев, По поводу "основного" экспорта, все верно работать не должно, но работает. И согласен практика плохая.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать aliases доступными при установке пакета, вам необходимо создать или изменить файл composer.json в вашем проекте. В этом файле вы можете указать пути к вашим aliases, чтобы они были доступны при установке пакета.
Прежде всего, убедитесь, что вы используете composer для управления зависимостями в вашем проекте. Если вы еще не установили composer, вы можете сделать это, выполнив команду установки composer.
Далее, откройте файл composer.json вашего проекта и добавьте секцию "autoload" с ключом "psr-4" или "psr-0", в зависимости от того, как вы хотите настроить автозагрузку.
Например, если вы хотите добавить алиас "MyNamespace" для пути "src/", ваш файл composer.json может выглядеть следующим образом:
{ "autoload": { "psr-4": { "MyNamespace\\": "src/" } } }
После того как вы внесли изменения в файл composer.json, запустите команду "composer dump-autoload", чтобы обновить автозагрузчик composer и сделать ваши aliases доступными.
Теперь вы можете использовать ваш алиас в любом месте вашего проекта, например:
use MyNamespace\SomeClass;
Таким образом, вы можете сделать ваши aliases доступными при установке пакета, что упростит работу с вашим кодом и улучшит его читаемость.