组件库

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": "创建一个可重用的 Qwik 组件库",
  "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`

这是你的库的入口点，它将导出所有你想要向世界公开的组件和函数。

// 作为示例，我们将导出 Logo 和 Counter 组件
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 字段。

Contributors

Thanks to all the contributors who have helped make this documentation better!