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