函式庫

Qwik 使用 Vite 的函式庫模式來建立元件函式庫。

為了建立 Qwik 的元件函式庫，您需要確保遵循特定的規則，這是因為 Qwik 優化器需要將您的函式庫識別為 Qwik 函式庫。

建立新元件庫最簡單的方法是使用內建的 library starter

pnpm create qwik library my-library

這將會建立一個名為 my-library 的新資料夾，結構如下：

├── README.md
├── package.json
├── src
│   ├── components
│   │   ├── counter
│   │   │   └── counter.tsx
│   │   └── logo
│   │       └── logo.tsx
│   ├── entry.dev.tsx
│   ├── entry.ssr.tsx
│   ├── index.ts
│   └── root.tsx
├── tsconfig.json
└── vite.config.ts

函式庫最重要的檔案是配置正確的 package.json 和 vite.config.ts。

package.json

{
  "name": "my-qwik-library-name",
  "version": "0.0.1",
  "description": "Create a reusable Qwik component library",
  "main": "./lib/index.qwik.mjs",
  "qwik": "./lib/index.qwik.mjs",
  "types": "./lib-types/index.d.ts",
  "exports": {
    ".": {
      "import": "./lib/index.qwik.mjs",
      "require": "./lib/index.qwik.cjs",
      "types": "./lib-types/index.d.ts"
    }
  },
  "files": [
    "lib",
    "lib-types"
  ],
  "type": "module",
}

請注意 qwik 欄位，這是 Qwik Optimizer 的進入點，它將使用這個檔案來產生 index.qwik.mjs 檔案。

該檔案必須使用 .qwik.mjs 副檔名，否則 Qwik Optimizer 將無法辨識。

vite.config.ts

import { defineConfig } from 'vite';
import { qwikVite } from '@builder.io/qwik/optimizer';
 
export default defineConfig(() => {
  return {
    build: {
      target: 'es2020',
      lib: {
        entry: './src/index.ts',
        formats: ['es', 'cjs'],
        fileName: (format) => `index.qwik.${format === 'es' ? 'mjs' : 'cjs'}`,
      },
    },
    plugins: [qwikVite()],
  };
});

與一般的 Vite 設定相比，函式庫將使用 Vite 的 lib 模式，這需要您正確設定 build.lib。

`src/index.ts`

這是函式庫的進入點，它將匯出您要公開給外界的所有元件和函式。

// As an example, we will export the Logo and Counter components
export { Logo } from './components/logo/logo';
export { Counter } from './components/counter/counter';

函式庫也是應用程式

函式庫 starter 也是一個獨立的 Qwik 應用程式（沒有路由，也沒有 Qwik City），這就是您會找到 entry.dev.tsx、entry.ssr.tsx 和 root.tsx 檔案的原因。

不用擔心它們，它們不會成為最終函式庫的一部分，但在開發和測試過程中很有用，因此您可以在實際的 Qwik 應用程式中測試您的元件。

建置和發佈

為了發佈您的函式庫，您必須先在 lib 模式下建置它，然後發佈到 npm。

npm run build

這將會建立一個 lib 資料夾，結構如下。然後您可以將其發佈到 npm。

npm publish

請注意，在第一次發佈之前，您可能需要更新 package.json 欄位，例如 name、version、description 等等。

對於任何後續的發佈，您都需要更新 version 欄位。

貢獻者

感謝所有幫助改進此文件檔案的貢獻者！