Как упростить импорт при использовании SvelteKit с упаковщиком Vite, например $lib/?

В настоящее время я работаю над проектом, используя SvelteKit с пакетом Vite, и я обнаружил, что мой импорт становится слишком сложным. Например, чтобы получить доступ к определенным файлам, я должен написать импорт следующим образом: import GtoolsStore from "../../../../../../../../database/Gtools/GtoolsStore"; Как видите, для доступа к файлу требуется много «../».

Это не только утомительно писать, но и затрудняет чтение и понимание кода. Это также усложняет рефакторинг кода, поскольку изменение файловой структуры может потребовать множества обновлений для операторов импорта по всему проекту.

В SvelteKit у нас есть различные базовые URL-адреса, такие как $lib/, которые полезны для упрощения импорта. Например, вместо того, чтобы писать ../../../../../myFolder/myComponent.svelte, мы можем просто использовать $lib/myFolder/MyComponent.

Однако я хотел бы создать собственные базовые URL-адреса для определенных папок, таких как $src и $database, не переопределяя существующие базовые URL-адреса, такие как $lib и $app. Я предполагаю, что это можно сделать с помощью какого-то файла конфигурации, такого как {baseUrls: {"src": ./src, "database": $src/database}}.

Используя пользовательские базовые URL-адреса, я надеюсь упростить импорт и упростить работу с проектом. Однако я не знаю, как правильно это сделать в SvelteKit и Vite, и меня беспокоят потенциальные конфликты с автозаполнением TypeScript, VSCODE и IntelliSense.

Поэтому я был бы признателен за любые рекомендации или советы о том, как создавать пользовательские базовые URL-адреса в SvelteKit и Vite и как убедиться, что это решение хорошо работает с автозаполнением VSCODE и intellisense, а также с TypeScript. Заранее спасибо за вашу помощь!

вот пример структуры в VSCODE
(если нужно,
но должно работать и в других с простой конфигурацией, я думаю.)

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
175
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В SvelteKit вы можете использовать концепцию, называемую псевдонимом, которую вы можете изучить, используя документы: https://kit.svelte.dev/docs/configuration#alias

Вот самый простой пример того, как изменить файл svelte.config.js, чтобы решить нашу проблему:

(используйте следующий, а не этот, это только самый простой пример):

/**
 * @type {import('@sveltejs/kit').Config}
 */
const config = {
  kit: {
    alias: {
      '$src': './src',
      '$database': './src/database'
    }
  }
};

export default config;

но лучше полный
(так как я вижу у вас попутный ветер и многое другое, так что этот конфиг не сломает ваш код):

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://kit.svelte.dev/docs/integrations#preprocessors
    // for more information about preprocessors
    preprocess: vitePreprocess(),

    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter(),
        // see https://kit.svelte.dev/docs/configuration#alias for more information about alias
        alias: {
            $src: './src',
            $database: './src/database',
        }
    }
};

export default config;

В этом примере мы определяем два псевдонима: $src и $database, которые указывают на каталоги src/ и src/database/ в нашем проекте. Вы можете определить столько псевдонимов, сколько вам нужно, и назвать их по своему усмотрению.

Теперь в ваших компонентах Svelte или файлах JavaScript вы можете импортировать файлы из этих каталогов, используя определенные вами псевдонимы:

import GtoolsStore from '$database/Gtools/GtoolsStore';
import MyComponent from '$src/myFolder/MyComponent.svelte';

Как видите, импорт намного проще.

Помните, что если у вас есть существующие импорты, использующие относительные пути, вам нужно будет обновить их, чтобы вместо этого использовать псевдонимы.


Обновлено:

Не обязательно использовать префикс $

вы можете использовать любой префикс,
Но чтобы соответствовать Svelte, лучше следовать нотации $lib...

если тебе это действительно не нравится
Вы даже можете избежать его использования, сделав это

const config = {
  kit: {
    alias: {
      src: './src',
      database: './src/database'
    }
  }
};

и ваш импорт станет таким:

import GtoolsStore from 'database/Gtools/GtoolsStore';
import MyComponent from 'src/myFolder/MyComponent.svelte';

Другие вопросы по теме