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 文档 的 故障排除
部分,并确保您使用的是推荐版本。