Vite

Для обеспечения быстрой разработки Qwik использует Vite. Vite - это инструмент сборки, который обслуживает ваш код во время разработки с помощью встроенных ES-модулей. Это означает, что ему не нужно связывать ваш код или транспонировать его для работы в браузере. Он также поставляется с молниеносной горячей заменой модулей (HMR), которая мгновенно обновляет браузер при внесении изменений в код.

Конфигурация

После создания нового проекта Qwik вы найдете файл vite.config.js в его корне. В этом файле вы можете настроить Vite.

Плагины

Qwik поставляется с двумя плагинами, которые упрощают использование Vite с Qwik и Qwik City.

vite.config.js
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 и убедитесь, что вы используете рекомендуемую версию.

Участники

Спасибо всем участникам, которые помогли сделать эту документацию лучше!

  • zanettin
  • manucorporat
  • cunzaizhuyi
  • cayter
  • the-r3aper7
  • ilteoood
  • mhevery
  • jessezhang91
  • mrhoodz
  • adamdbradley