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 文件 的「疑難排解」部分,並確保您使用的是建議的版本。