Vite
Для обеспечения быстрой разработки Qwik использует Vite. Vite - это инструмент сборки, который обслуживает ваш код во время разработки с помощью встроенных ES-модулей. Это означает, что ему не нужно связывать ваш код или транспонировать его для работы в браузере. Он также поставляется с молниеносной горячей заменой модулей (HMR), которая мгновенно обновляет браузер при внесении изменений в код.
Конфигурация
После создания нового проекта Qwik вы найдете файл vite.config.js
в его корне. В этом файле вы можете настроить Vite.
Плагины
Qwik поставляется с двумя плагинами, которые упрощают использование Vite с Qwik и Qwik City.
import { defineConfig } from 'vite';
import { qwikCity } from '@builder.io/qwik-city/vite';
import { qwikVite } from '@builder.io/qwik/optimizer';
import tsconfigPaths from 'vite-tsconfig-paths';
export default defineConfig(() => {
return {
plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
};
});
qwikVite()
Чтобы изменить конфигурацию, вы можете передать объект в функцию qwikVite
. Возможные варианты:
debug
/**
* Вывод подробного журнала отладки плагина Qwik.
* По умолчанию `false`
*/
debug?: boolean;
entryStrategy
/**
* Стратегия точки входа Qwik, которую следует использовать при сборке для производственной среды.
* Во время разработки тип всегда имеет значение `hook`.
* По умолчанию `{ type: "smart" }`)
*/
entryStrategy?: EntryStrategy;
srcDir
/**
* Исходный каталог для поиска всех компонентов Qwik. Поскольку Qwik
* не имеет единственной точки входа, `srcDir` используется для рекурсивного
* поиска файлов Qwik.
* По умолчанию `src`
*/
srcDir?: string;
tsconfigFileNames
/**
* Список файлов tsconfig.json для использования ESLint-предупреждениями в процессе разработки.
* По умолчанию `['tsconfig.json']`
*/
tsconfigFileNames?: string[];
vendorRoots
/**
* Список каталогов для рекурсивного поиска компонентов Qwik или других поставщиков.
* По умолчанию `[]`
*/
vendorRoots?: string[];
client
client?: {
/**
* Точка входа клиентской сборки. Как правило, это
* главный компонент приложения.
* По умолчанию `src/components/app/app.tsx`
*/
input?: string[] | string;
/**
* Точка входа для разработки на стороне клиента с горячей перезагрузкой модулей.
* Это только для разработки с Vite и без использования SSR.
* По умолчанию `src/entry.dev.tsx`
*/
devInput?: string;
/**
* Выходной каталог клиентской сборки.
* По умолчанию `dist`
*/
outDir?: string;
/**
* При сборке клиента будет создан манифест и этот хук
* будет вызван со сгенерированными данными сборки.
* По умолчанию `undefined`
*/
manifestOutput?: (manifest: QwikManifest) => Promise<void> | void;
};
ssr
ssr?: {
/**
* Точка входа для рендера SSR. Этот файл должен экспортировать
* функцию `render()`. Эта точка входа и `render()` экспортируют
* функцию, которая также используется для SSR сборщика Vite и
* режима отладки Node.js.
* По умолчанию `src/entry.ssr.tsx`
*/
input?: string;
/**
* Выходной каталог серверной сборки.
* По умолчанию `dist`
*/
outDir?: string;
/**
* Сборка SSR требует манифест, созданный во время сборки клиента.
* Этот плагин будет по умолчанию подключать клиентский манифест к SSR-сборке.
* Однако, опция `manifestInput` может быть использована для предоставления манифеста вручную.
* По умолчанию `undefined`
*/
manifestInput?: QwikManifest;
};
optimizerOptions
/**
* Опции оптимизатора Qwik.
* По умолчанию `undefined`
*/
optimizerOptions?: OptimizerOptions;
transformedModuleOutput
/**
* Хук, который вызывается после сборки и предоставляет все преобразованные
* модули, которые использовались для неё.
*/
transformedModuleOutput?:
| ((transformedModules: TransformModule[]) => Promise<void> | void)
| null;
devTools
devTools?: {
/**
* Нажатие и удерживание заданных клавиш включают инспектор разработки Qwik.
* По умолчанию это поведение активируется при нажатии левой или правой клавиши `Alt`.
* Если установлено значение `false`, инспектор разработки будет отключен.
* Допустимыми значениями являются значения `KeyboardEvent.code`.
* Обратите внимание, что суффиксы 'Left' и 'Right' игнорируются.
*/
clickToSource: string[] | false;
};
qwikCity()
Чтобы изменить конфигурацию, вы можете передать объект в функцию qwikCity
. Возможные опции:
routesDir
/**
* Каталог `маршрутов`. По умолчанию используется `src/routes`.
*/
routesDir?: string;
serverPluginsDir
/**
* Каталог серверных плагинов. По умолчанию имеет значение `src/server-plugins`.
*/
serverPluginsDir?: string;
basePathname
/**
* Базовое имя пути, используемого для создания абсолютных путей URL вплоть до
* `hostname`, всегда должен начинаться и заканчиваться символом `/`.
* По умолчанию используется `/`.
*/
basePathname?: string;
trailingSlash
/**
* Проверять, что в конце URL-адресов страниц стоит косая черта. По умолчанию имеет значение `true`.
* (Примечание: в предыдущих версиях по умолчанию стояло значение `false`).
*/
trailingSlash?: boolean;
mdxPlugins
/**
* Включить или отключить плагины MDX, включённые в Qwik-city по умолчанию.
*/
mdxPlugins?: MdxPlugins;
mdx
/**
* Опции MDX https://mdxjs.com/
*/
mdx?: any;
platform
/**
* Объект платформы, который можно использовать для имитации привязки Cloudflare.
*/
platform?: Record<string, unknown>;
Устранение неполадок
Перед созданием вопроса о проблеме в репозитории Qwik проверьте раздел Устранение неполадок
в документации Vite и убедитесь, что вы используете рекомендуемую версию.