Как сделать aliases доступными при установке пакета?

Question

[Tdvist]

Есть пакет написанный мной.
в package.json задал entry point для экспорта классов и логики.
"main": "./src/index.js"
И не подтягиваются в проект элементы экспортируемые из index.js с использованием alias

export { something } from "@/something.js" // не экспортируется
export { something } from "./path/to/something.js" // все ок

в package.json пакета указал
"@/*": "./path/to"
В проекте в котором использую пакет юзаю Vite в качестве сборщика.

Answer 1

[Максим Морев]

Не очень понятно, где проблема - под алиасами тут будто бы понимаются одновременно именованные экспорты из пакетов и одновременно алиасы для импорта внутри самого приложения.

Если у вас внешний пакет (иначе непонятно, причём тут `main` в `package.json`), и вам нужно сделать экспорт конкретного файла по "короткому" пути, то следует оформить так:

// 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';

---

Если речь идёт о том, чтобы использовать алиасы внутри одного проекта, то следует сконфигурировать алиасы в `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)) },
    ],
}),

И в `(js|ts)config.json`, при наличии, добавить:

{
  "compilerOptions": {
    "paths": {
      "~components/*": ["./src/components/*"]
    }
  }
}

Comments

[Tdvist]

На мой вопрос вы попробовали ответить в первой части. Под alias понимается сокращение для путей. Но ваш вариант не подходит. В приложении из моего пакета я импортирую:
import { component } from 'my-package';
В моем пакете я указал main файлик и его оформил как public api;
То есть я реэкспортирую штуки из пакета из этого файлика.
Ранее во время написания пакета я юзал сокращенные пути например:

import { func } from 'libs/func.js'
/* import { func } from '../libs/func.js' если юзать относительные пути */

И если юзать относительные пути, то когда я юзаю пакет в приложении все работает.
Но не хотелось бы переписывать все пути на относительные.
То что вы описали как:

{
  "name": "mypackage",
  "exports": {
    ".": "./dist/index.js",
    "./whatever/": "./dist/whatever/non-index.js"
  } 
}

Я описал

"exports": {
    "libs": "./src/libs",
  }

[Tdvist]

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

Также не уверен, что будет работать без "основного" экспорта (даже если работает, считал бы это плохой практикой).
Так что лучше вообще вот так:

"exports": {
    ".": "./src/index.js",
    "./libs": "./src/libs.js"
  }

Настройки `tsconfig.json` после вашего уточнения значения не имеют, это только для вашей IDE, а не для компилятора

[Tdvist]

Максим Морев, По поводу "основного" экспорта, все верно работать не должно, но работает. И согласен практика плохая.