库

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

请注意，在第一次发布之前，您可能需要更新 package.json 字段，例如 name、version、description 等。

对于任何后续发布，您将需要更新 version 字段。

贡献者

感谢所有帮助改进此文档的贡献者！