Пользовательская папка lib в SvelteKit

Как создать псевдоним пути в SvelteKit

Tom Svelte & SvelteKit, Руководства по кодированию, Обучение

Определение псевдонимов путей

Если вы хотите переименовать папку «lib», которая определена SvelteKit по умолчанию, или добавить любой другой каталог для краткого импорта, вам необходимо обновить две конфигурации.

  • tsconfig, чтобы Typescript мог разрешить ваш псевдоним импорта
  • ваш svelte-config, который также должен знать псевдонимы пути

С этими изменениями каждый каталог в «src» может быть разрешен с помощью псевдонимов пути, что означает, что вы получаете короткий и простой импорт.

Обновление tsconfig-файла

В этом примере я добавлю новый каталог для краткого импорта, но те же изменения применяются, если вы хотите заменить «lib».

В следующем коде показан обновленный файл tsconfig.json, где объект «paths» был дополнен моим новым каталогом «msw», который является аббревиатурой от «mock service worker». Эта папка содержит весь мой код, связанный с MSW.

{
  "compilerOptions": {
    ...
    "paths": {
      "$lib": ["src/lib"],
      "$lib/*": ["src/lib/*"],
      "$msw": ["src/msw"],
      "$msw/*": ["src/msw/*"]
    }
  },
  ...
}

Обновление svelte-config

Теперь осталось также обновить конфигурацию, используемую SvelteKit, с именем «svelte.config.js». Нам просто нужно обновить конфигурацию объекта «vite». Обратите внимание, что мы также должны указать папку «lib» явно, так как наша настройка переопределяет папку по умолчанию, а это означает, что папка «lib» больше не будет псевдонимом.

import adapter from "@sveltejs/adapter-auto";
import preprocess from "svelte-preprocess";
import path from "path";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess(),

  kit: {
    adapter: adapter(),
    vite: {
      resolve: {
        alias: {
          $msw: path.resolve("./src/msw"),
          $lib: path.resolve("./src/lib")
        }
      }
    }
  }
};

export default config;

javascriptLanguageCheck out all coding posts

Вывод

И это все! С этими небольшими изменениями вы можете использовать любую папку в «src» с псевдонимами пути для чистого и простого импорта.

Действия

Feedback

Предлагаемые сообщения

Дополнение