返回

手把手教你构建一个 ts 组件包

前端







# 手把手教你构建一个 ts 组件包

## 前言

在日常开发中，我们经常会遇到需要复用某些组件的情况。为了方便管理和维护，我们可以将这些组件打包成一个组件库，然后在其他项目中直接使用。

本文将以一个 vue3+ts+less 的 Modal 组件为例，手把手教你如何构建一个 ts 组件包。

## 创建项目

首先，我们需要创建一个新的项目。可以使用 Vite 来快速创建一个 vue3 项目。

```bash
# 安装 Vite
npm install -g vite

# 创建项目
vite create my-component-lib

添加组件

接下来，我们需要在项目中添加一个组件。

# 进入项目目录
cd my-component-lib

# 创建组件目录
mkdir src/components

# 创建组件文件
touch src/components/Modal.vue

编写组件

在 Modal.vue 文件中，我们可以编写组件的代码。

<template>
  <div class="modal">
    <div class="modal-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Modal',
});
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  padding: 20px;
  background-color: #fff;
}
</style>

构建组件库

组件编写完成后，我们需要构建组件库。

# 安装构建工具
npm install -D vite-plugin-build

# 添加构建配置
// vite.config.js
import { defineConfig } from 'vite';
import build from 'vite-plugin-build';

export default defineConfig({
  plugins: [
    build({
      lib: {
        entry: 'src/components/Modal.vue',
        name: 'MyModal',
        fileName: 'modal',
      },
    }),
  ],
});

发布组件库

组件库构建完成后，我们可以将其发布到 npm。

# 打包组件库
npm run build

# 发布组件库
npm publish

使用组件库

其他项目中，我们可以直接使用组件库。

# 安装组件库
npm install my-component-lib

# 在项目中使用组件库
import MyModal from 'my-component-lib';

export default {
  components: {
    MyModal,
  },
};

结语

本文介绍了如何使用 Vite 构建一个 ts 组件包。通过本文，你将能够轻松地构建自己的组件库，并将其发布到 npm。