ライブラリ

Qwik は、コンポーネントライブラリを作成するために、Vite のライブラリモードを使用します。

Qwik のコンポーネントライブラリを作成するには、特定のルールに従う必要があります。これは、Qwik オプティマイザーがライブラリを Qwik ライブラリとして認識する必要があるためです。

新しいコンポーネントライブラリを作成する最も簡単な方法は、組み込みの library スターターを使用することです。

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 オプティマイザーのエントリポイントです。このファイルを使用して、index.qwik.mjs ファイルが生成されます。

ファイル名は .qwik.mjs 拡張子でなければなりません。そうでないと、Qwik オプティマイザーは認識しません。

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';

ライブラリはアプリでもある

ライブラリスターターは、スタンドアロンの Qwik アプリでもあります（ルーティングや Qwik City はありません）。そのため、entry.dev.tsx、entry.ssr.tsx、root.tsx ファイルが見つかる理由です。

これらは最終的なライブラリの一部ではありませんが、開発とテスト中に役立ちます。実際の Qwik アプリでコンポーネントをテストできます。

ビルドと公開

ライブラリを公開するには、まず lib モードでビルドしてから npm に公開する必要があります。

npm run build

これにより、次の構造の lib フォルダが作成されます。その後、npm に公開できます。

npm publish

最初の公開前に、name、version、description など、package.json のフィールドを更新することをお勧めします。

それ以降の公開では、version フィールドを更新する必要があります。

貢献者

このドキュメントの改善に貢献してくれたすべての貢献者に感謝します！