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