Skip to main content

Часто Задаваемые Вопросы

SvelteKit еще не 1.0. Стоит ли мне его использовать? А что насчет Саппера?

SvelteKit в настоящее время находится в стадии бета-тестирования, пока мы дорабатываем API. В Sapper не будет добавлено никаких новых функций, и вся разработка будет сосредоточена на SvelteKit.

Как включить HMR в SvelteKit?

Горячая перезагрузка модулей (HMR) уже включена в SvelteKit по умолчанию с использованием svelte-hmr. Если вы видели презентацию Рича на Svelte Summit 2020, то могли заметить что там показана более продвинутая версия HMR. Это демо было сделано с включенным флагом preserveLocalState. Ныне этот флаг по умолчанию выключен, поскольку в редких случаях может приводить к непредсказуемому поведению приложения. Но не волнуйтесь, и без этого флага HMR в SvelteKit работает! Если вам всё же важно сохранять локальное состояние, используйте директивы @hmr:keep или @hmr:keep-all, как описано в документации svelte-hmr.

У меня проблемы при использовании адаптера.

Убедитесь, что в файле package.json версия адаптера указана как "next".

Как мне настроить подмену пути(aliases)?

Сначала её нужно добавить в конфигурацию Vite. В файле svelte.config.js добавьте vite.resolve.alias:

В svelte.config.cjs добавьте vite.resolve.alias:

/// file: svelte.config.js
// @filename: ambient.d.ts
declare module 'path';

// @filename: index.js
import path from 'path';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    vite: {
      resolve: {
        alias: {
          $utils: path.resolve('./src/utils')
        }
      }
    }
  }
};
export default config;

Затем, чтобы TypeScript тоже учитывал подмену путей, добавьте аналогичные записи и в tsconfig.json (для пользователей TypeScript) или jsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "$utils/*": ["src/utils/*"]
    }
  }
}

Как использовать переменные окружения?

Vite использует dotenv для загрузки переменных среды из файла с именем .env или аналогичного. Доступны только переменные среды с префиксом VITE_ (вы можете установить envPrefix, чтобы изменить это). Можно получить доступ к переменной используя import.meta.env.vite_env_var, а Vite статически заменит их при сборке.

Чтобы использовать переменные среды во время выполнения, вам нужно будет создать экземпляр dotenv самостоятельно в вашем серверном коде, чтобы они были доступны по адресу process.env.YOUR_ENV_VAR. При необходимости вы также можете использовать $session, чтобы передать их клиенту.

Подробнее о переменных окружения можно почитать в документации Vite.

Как я могу включить детали из `Package.json в моё приложение?

Вы не можете напрямую требовать файлы JSON, поскольку SVELTEKIT ожидает, что svelte.config.js будет модулем ES. Если вы хотите включить номер версии вашего приложения или другую информацию из package.json, вы можете загрузить JSON следующим образом:

/// file: svelte.config.js
// @filename: index.js
/// <reference types="@types/node" />
import { URL } from 'url';
// ---cut---
import { readFileSync } from 'fs';
import { fileURLToPath } from 'url';

const file = fileURLToPath(new URL('package.json', import.meta.url));
const json = readFileSync(file, 'utf8');
const pkg = JSON.parse(json);

Как исправить ошибку, которая происходит при попытке импортировать пакеты?

Поддержка Vite SSR стала довольно стабильной с версии Vite 2.7. Большинство проблем, с подключением библиотек, связаны с их неправильной упаковкой.

Библиотеки лучше всего работают с Vite, когда они предоставляют версию ESM, и вы можете предложить это авторам библиотек. Вот несколько вещей, которые следует иметь в виду при проверке правильной упаковки библиотеки:

  • exports имеет приоритет над другими полями эндпоинтов, такими как main и module. Добавление поля exports может быть не обратно совместимым, так как предотвращает глубокий импорт.
  • ESM-файлы должны заканчиваться на .mjs, если не установлен "type": "module", и в любом случае файлы CommonJS должны заканчиваться на .cjs.
  • main должен быть определен, если exports не определен. Это должен быть файл CommonJS или ESM и придерживаться предыдущего маркера. Если определено поле module, оно должно ссылаться на файл ESM.
  • Компоненты Svelte должны быть полностью представлены как ESM и иметь поле svelte, определяющее эндпоинт.

Рекомендуется убедиться, что зависимости внешних компонентов Svelte обеспечивают версию ESM. Однако для обработки зависимостей CommonJS vite-plugin-svelte будет искать любые зависимости CJS внешних компонентов Svelte и попросит Vite предварительно сгруппировать их, автоматически добавив их в optimizeDeps.include Vite, которые будет использовать esbuild для преобразования их в ESM. При таком подходе загрузка начальной страницы занимает больше времени. Если это становится заметным, попробуйте установить experimental.prebundleSvelteLibraries: true в svelte.config.js. Обратите внимание, что эта опция является экспериментальной.

Если вы все еще сталкиваетесь с проблемами, мы рекомендуем проверить список известных проблем Vite, наиболее часто затрагивающих пользователей SvelteKit и поискать их в трекере проблем Vite, или в трекере проблем соответствующей библиотеки. Иногда проблемы можно обойти, возясь со значениями конфигурации optimizeDeps или ssr.

Как использовать X вместе со SvelteKit?

Убедитесь, что вы прочитали раздел документации по интеграции. Если у вас все еще возникают проблемы, ниже перечислены решения распространенных проблем.

Как настроить базу данных?

Поместите код для запроса к базе данных в эндпоинт - не запрашивайте базу данных в файлах .svelte. Можно создать db.js или аналогичный файл, который настраивает соединение и делает клиента доступным во всем приложении в виде синглтона. Можно выполнить любой одноразовый код настройки в hooks.js и импортировать хелпер базы данных в любой эндпоинт.

Как использовать мидлвары?

adapter-node создает мидлвары, которые можно использовать с вашим собственным сервером для производственного режима. В dev вы можете добавить мидлвару в Vite с помощью плагина Vite. Например:

/** @type {import('vite').Plugin} */
const myPlugin = {
  name: 'log-request-middleware',
  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      console.log(`Got request ${req.url}`);
      next();
    });
  }
}

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	kit: {
 		vite: {
 			plugins: [myPlugin]
 		}
 	}
 };

 export default config;

См. документы Vite configureServer для получения более подробной информации, включая управление последовательностью.

Как использовать клиентскую библиотеку, которая зависит от document или window?

Vite попытается обработать все импортированные библиотеки и может завершиться ошибкой при обнаружении библиотеки, несовместимой с SSR. В настоящее время это происходит, даже когда SSR отключен.

Если вам нужен доступ к переменным document или window или код должен запускаться только на стороне клиента, вы можете обернуть его проверкой browser:

/// <reference types="@sveltejs/kit" />
// ---cut---
import { browser } from '$app/env';

if (browser) {
// client-only code here
}

Вы также можете запустить код в onMount, если хотите запустить его после того, как компонент был впервые отображен в DOM:

// @filename: ambient.d.ts
// @lib: ES2015
declare module 'some-browser-only-library';

// @filename: index.js
// ---cut---
import { onMount } from 'svelte';

onMount(async () => {
  const { method } = await import('some-browser-only-library');
  method('hello world');
});

Если библиотека, которую вы хотите использовать, свободна от побочных эффектов, вы также можете статически импортировать ее, и она будет тришейкнута в серверной сборке, где onMount будет автоматически заменена на no-op:

// @filename: ambient.d.ts
// @lib: ES2015
declare module 'some-browser-only-library';

// @filename: index.js
// ---cut---
import { onMount } from 'svelte';
import { method } from 'some-browser-only-library';

onMount(() => {
  method('hello world');
});

В противном случае, если библиотека имеет побочные эффекты и вы все равно предпочитаете использовать статический импорт, ознакомьтесь с vite-plugin-iso-import для поддержки ?client суффикс импорта. Импорт будет удален в сборках SSR. Однако обратите внимание, что вы потеряете возможность использовать VS Code Intellisense, если используете этот метод.

// @filename: ambient.d.ts
// @lib: ES2015
declare module 'some-browser-only-library?client';

// @filename: index.js
// ---cut---
import { onMount } from 'svelte';
import { method } from 'some-browser-only-library?client';

onMount(() => {
  method('hello world');
});

Поддерживается ли Yarn 2?

Вроде того. Функция Plug'n'Play (или 'pnp') сломана – она резолвит Node-модули нестандартным способом и пока не работает с нативными JavaScript модулями, которым является SvelteKit и непрерывно растущее число других пакетов. Вы можете настроить nodeLinker: 'node-modules' в вашем файле .yarnrc.yml для отключения pnp, но возможно проще просто использовать npm или pnpm, который так же быстр и эффективен, но лучше решает проблемы совместимости модулей.

По вопросам, относящимся непосредственно к Svelte смотрите Svelte FAQ.