Другие источники permalink
Пожалуйста, смотрите svelte FAQ и vite-plugin-svelte
FAQ, а также ответы на вопросы про эти библиотеки.
Пожалуйста, смотрите svelte FAQ и vite-plugin-svelte
FAQ, а также ответы на вопросы про эти библиотеки.
SvelteKit в настоящее время находится в стадии бета-тестирования, пока мы дорабатываем API. В Sapper не будет добавлено никаких новых функций, и вся разработка будет сосредоточена на SvelteKit.
Горячая перезагрузка модулей (HMR) уже включена в SvelteKit по умолчанию с использованием svelte-hmr. Если вы видели презентацию Рича на Svelte Summit 2020, то могли заметить что там показана более продвинутая версия HMR. Это демо было сделано с включенным флагом preserveLocalState
. Ныне этот флаг по умолчанию выключен, поскольку в редких случаях может приводить к непредсказуемому поведению приложения. Но не волнуйтесь, и без этого флага HMR в SvelteKit работает! Если вам всё же важно сохранять локальное состояние, используйте директивы @hmr:keep
или @hmr:keep-all
, как описано в документации svelte-hmr.
Убедитесь, что в файле package.json
версия адаптера указана как "next"
.
Сначала её нужно добавить в конфигурацию 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.
Вы не можете напрямую требовать файлы 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
может быть не обратно совместимым, так как предотвращает глубокий импорт..mjs
, если не установлен "type": "module"
, и в любом случае файлы CommonJS должны заканчиваться на .cjs
.main
должен быть определен, если exports
не определен. Это должен быть файл CommonJS или ESM и придерживаться предыдущего маркера. Если определено поле module
, оно должно ссылаться на файл 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
.
Убедитесь, что вы прочитали раздел документации по интеграции. Если у вас все еще возникают проблемы, ниже перечислены решения распространенных проблем.
Поместите код для запроса к базе данных в эндпоинт - не запрашивайте базу данных в файлах .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');
});
Вроде того. Функция Plug'n'Play (или 'pnp') сломана – она резолвит Node-модули нестандартным способом и пока не работает с нативными JavaScript модулями, которым является SvelteKit и непрерывно растущее число других пакетов. Вы можете настроить nodeLinker: 'node-modules'
в вашем файле .yarnrc.yml
для отключения pnp, но возможно проще просто использовать npm или pnpm, который так же быстр и эффективен, но лучше решает проблемы совместимости модулей.
По вопросам, относящимся непосредственно к Svelte смотрите Svelte FAQ.