Vite

Qwik 利用 Vite 提供快速开发体验。Vite 是一个构建工具,在开发过程中通过原生 ES 模块提供代码服务。这意味着它不需要捆绑代码或将其转译为浏览器才能运行。它还具有闪电般的快速热模块替换 (HMR),当您更改代码时会立即更新您的浏览器。

配置

在搭建新的 Qwik 项目后,您将在项目的根目录中找到一个 vite.config.js 文件。您可以在此处配置 Vite。

Vite 插件

Qwik 附带两个插件,使您可以轻松地将 Vite 与 Qwik 和 Qwik City 配合使用。

vite.config.ts
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

/**
 * Prints verbose Qwik plugin debug logs.
 * Default `false`
 */
debug?: boolean;

entryStrategy

/**
 * The Qwik entry strategy to use while bundling for production.
 * During development the type is always `hook`.
 * Default `{ type: "smart" }`)
 */
entryStrategy?: EntryStrategy;

srcDir

/**
 * The source directory to find all the Qwik components. Since Qwik
 * does not have a single input, the `srcDir` is use to recursively
 * find Qwik files.
 * Default `src`
 */
srcDir?: string;

tsconfigFileNames

/**
 * List of tsconfig.json files to use for ESLint warnings during development.
 * Default `['tsconfig.json']`
 */
tsconfigFileNames?: string[];

vendorRoots

/**
 * List of directories to recursively search for Qwik components or Vendors.
 * Default `[]`
 */
vendorRoots?: string[];

client

client?: {
    /**
     * The entry point for the client builds. Typically this would be
     * the application's main component.
     * Default `src/components/app/app.tsx`
     */
    input?: string[] | string;
    /**
     * Entry input for client-side only development with hot-module reloading.
     * This is for Vite development only and does not use SSR.
     * Default `src/entry.dev.tsx`
     */
    devInput?: string;
    /**
     * Output directory for the client build.
     * Default `dist`
     */
    outDir?: string;
    /**
     * The client build will create a manifest and this hook
     * is called with the generated build data.
     * Default `undefined`
     */
    manifestOutput?: (manifest: QwikManifest) => Promise<void> | void;
};

ssr

ssr?: {
    /**
     * The entry point for the SSR renderer. This file should export
     * a `render()` function. This entry point and `render()` export
     * function is also used for Vite's SSR development and Node.js
     * debug mode.
     * Default `src/entry.ssr.tsx`
     */
    input?: string;
    /**
     * Output directory for the server build.
     * Default `dist`
     */
    outDir?: string;
    /**
     * The SSR build requires the manifest generated during the client build.
     * By default, this plugin will wire the client manifest to the ssr build.
     * However, the `manifestInput` option can be used to manually provide a manifest.
     * Default `undefined`
     */
    manifestInput?: QwikManifest;
};

optimizerOptions

/**
 * Options for the Qwik optimizer.
 * Default `undefined`
 */
optimizerOptions?: OptimizerOptions;

transformedModuleOutput

/**
 * Hook that's called after the build and provides all of the transformed
 * modules that were used before bundling.
 */
transformedModuleOutput?:
    | ((transformedModules: TransformModule[]) => Promise<void> | void)
    | null;

devTools

devTools?: {
    /**
     * Validates image sizes for CLS issues during development.
     * In case of issues, provides you with a correct image size resolutions.
     * If set to `false`, image dev tool will be disabled.
     */
    imageDevTools?: boolean | true;
    /**
     * Press-hold the defined keys to enable qwik dev inspector.
     * By default the behavior is activated by pressing the left or right `Alt` key.
     * If set to `false`, qwik dev inspector will be disabled.
     * Valid values are `KeyboardEvent.code` values.
     * Please note that the 'Left' and 'Right' suffixes are ignored.
     */
    clickToSource?: string[] | false;
};

qwikCity()

要修改配置,您可以将一个对象传递给 qwikCity 函数。可能的选项是

routesDir

/**
 * Directory of the `routes`. Defaults to `src/routes`.
 */
routesDir?: string;

serverPluginsDir

/**
 * Directory of the `server plugins`. Defaults to `src/server-plugins`.
 */
serverPluginsDir?: string;

basePathname

/**
 * The base pathname is used to create absolute URL paths up to
 * the `hostname`, and must always start and end with a
 * `/`.  Defaults to `/`.
 */
basePathname?: string;

trailingSlash

/**
 * Ensure a trailing slash ends page urls. Defaults to `true`.
 * (Note: Previous versions defaulted to `false`).
 */
trailingSlash?: boolean;

mdxPlugins

/**
 * Enable or disable MDX plugins included by default in qwik-city.
 */
mdxPlugins?: MdxPlugins;

mdx

/**
* MDX Options https://mdxjs.com/
*/
mdx?: any;

platform

/**
* The platform object which can be used to mock the Cloudflare bindings.
*/
platform?: Record<string, unknown>;

故障排除

在 Qwik 存储库中创建问题之前,请查看 Vite 文档 的“故障排除”部分,并确保您使用的是推荐的版本。

贡献者

感谢所有帮助改进本文档的贡献者!

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