Как упростить импорт при использовании 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
(если нужно,
но должно работать и в других с простой конфигурацией, я думаю.)
Ответы 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';