Vite

Qwik 使用 Vite 提供快速的开发体验。Vite 是一个构建工具,在开发过程中通过原生 ES 模块来提供代码。这意味着它不需要将代码打包或转译以在浏览器中运行。它还提供了闪电般快速的热模块替换(HMR),当你修改代码时,它会立即更新浏览器。

配置

在创建一个新的 Qwik 项目后,你会在项目的根目录下找到一个 vite.config.js 文件。你可以在这里配置 Vite。

插件

Qwik 提供了两个插件,使得在 Qwik 和 Qwik City 中使用 Vite 变得更加容易。

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

/**
 * 打印详细的 Qwik 插件调试日志。
 * 默认为 `false`
 */
debug?: boolean;

entryStrategy

/**
 * 在生产环境中进行打包时使用的 Qwik 入口策略。
 * 在开发过程中,类型始终为 `hook`。
 * 默认为 `{ type: "smart" }`
 */
entryStrategy?: EntryStrategy;

srcDir

/**
 * 用于查找所有 Qwik 组件的源目录。由于 Qwik
 * 没有单一的输入,`srcDir` 用于递归查找 Qwik 文件。
 * 默认为 `src`
 */
srcDir?: string;

tsconfigFileNames

/**
 * 用于开发过程中的 ESLint 警告的 tsconfig.json 文件列表。
 * 默认为 `['tsconfig.json']`
 */
tsconfigFileNames?: string[];

vendorRoots

/**
 * 递归搜索 Qwik 组件或 Vendors 的目录列表。
 * 默认为 `[]`
 */
vendorRoots?: string[];

client

client?: {
    /**
     * 客户端构建的入口点。通常是应用程序的主组件。
     * 默认为 `src/components/app/app.tsx`
     */
    input?: string[] | string;
    /**
     * 用于仅在客户端进行开发时进行热模块重载的入口输入。
     * 这仅适用于 Vite 的开发环境,不使用 SSR。
     * 默认为 `src/entry.dev.tsx`
     */
    devInput?: string;
    /**
     * 客户端构建将创建一个清单,此钩子将使用生成的构建数据调用。
     * 默认为 `undefined`
     */
    outDir?: string;
    /**
     * 客户端构建将创建一个清单,此钩子将使用生成的构建数据调用。
     * 默认为 `undefined`
     */
    manifestOutput?: (manifest: QwikManifest) => Promise<void> | void;
};

ssr

ssr?: {
    /**
     * SSR 渲染器的入口点。此文件应导出一个 `render()` 函数。
     * 此入口点和 `render()` 导出函数也用于 Vite 的 SSR 开发和 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`,qwik 开发检查器将被禁用。
     * 有效值为 `KeyboardEvent.code` 值。
     * 请注意,忽略了 'Left' 和 'Right' 后缀。
     */
    clickToSource: string[] | false;
};

qwikCity()

要修改配置,你可以向 qwikCity 函数传递一个对象。可能的选项有:

routesDir

/**
 * `routes` 的目录。默认为 `src/routes`。
 */
routesDir?: string;

serverPluginsDir

/**
 * `server plugins` 的目录。默认为 `src/server-plugins`。
 */
serverPluginsDir?: string;

basePathname

/**
 * 基本路径用于创建到 `hostname` 的绝对 URL 路径,并且必须始终以 `/` 开头和结尾。
 * 默认为 `/`。
 */
basePathname?: string;

trailingSlash

/**
 * 确保页面 URL 以斜杠结尾。默认为 `true`。
 * (注意:之前的版本默认为 `false`)。
 */
trailingSlash?: boolean;

mdxPlugins

/**
 * 启用或禁用 qwik-city 中默认包含的 MDX 插件。
 */
mdxPlugins?: MdxPlugins;

mdx

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

platform

/**
* 平台对象,可用于模拟 Cloudflare 绑定。
*/
platform?: Record<string, unknown>;

故障排除

在在 Qwik 仓库上创建问题之前,请检查 Vite 文档故障排除 部分,并确保您使用的是推荐版本。

Contributors

Thanks to all the contributors who have helped make this documentation better!

  • zanettin
  • manucorporat
  • cunzaizhuyi
  • cayter
  • the-r3aper7
  • ilteoood
  • mhevery