开发一个组件库,需要学哪些技术栈呢?

开发 前端
vitest 是 vite 官方出的一个测试的库,被很多组件库拿来做单元测试,为什么要单元测试呢?因为你的组件库是做给很多人用的,你要确保你的组件库是靠谱的,所以必须在开发完后,进行单元测试,测试没问题,才能发布!

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

很多人问我怎么去封装一个组件库,其实这个问题一次性肯定讲不完,因为这分为很多个问题:

  • 组件库所需技术栈
  • 怎么封装好一个组件
  • 组件实战+组件单元测试
  • 组件库打包发布

只有这几个环节都了解清楚了,你才能封装一个组件库,不然就算你迷迷糊糊封装了一个组件库,你也学不到什么东西。

我会陆续出四篇文章分别介绍这四个环节,带大家实战一下组件库~

本篇文章,也就是【组件库系列第一篇】,就是介绍一下封装组件库所需哪些技术栈

pnpm + menorepo

这是现在很多组件库,其实不止组件库,很多开源项目都是使用了 pnpm + menorepo 来进行项目的管理,组件库也不例外,很多知名的组件库都是使用 pnpm + menorepo 来管理项目的,大家要去看 pnpm 子项目管理的机制,比如 Element-plus 用 pnpm 管理几个子项目

  • 指令
  • 组件
  • hooks
  • 语言

常用工具库

在开发的过程中,可以用一些第三方的工具库来大大提高开发效率,比如 lodash、vueuse,当然我们不需要对它们过于深入了解,只需要用到的时候查查文档就行

  • lodash是一个原生的工具库
  • vueuse是一个vue的hooks库

TypeScript

用 typescript 来开发组件库是现在的主流,至少基本的类型使用你要会

vite | esbuild

如果我们想要打包一个 vue 组件库,我们可以用 vite 或 esbuild 去打包

vitest

vitest 是 vite 官方出的一个测试的库,被很多组件库拿来做单元测试,为什么要单元测试呢?因为你的组件库是做给很多人用的,你要确保你的组件库是靠谱的,所以必须在开发完后,进行单元测试,测试没问题,才能发布~

这是对他人负责,也是对自己负责~

less

用来写样式的,当然如果你想用css也行。。

自动化发包

最后打包后肯定是要使用 npm 或 pnpm 去发包,至少你要知道 npm 怎么发包~如果你连基本的 npm 打包都不会,那你怎么去理解自动化发包呢?

责任编辑:武晓燕 来源: 前端之神
相关推荐

2022-06-27 09:45:22

MySQL索引

2011-12-26 15:58:01

枚举

2010-03-12 17:29:16

Python模块

2021-12-20 23:24:40

前端测试开发

2020-09-23 07:47:14

Java方式类型

2023-07-04 15:11:30

TypeScript类型保护

2022-02-25 14:06:01

区块链生态系统技术

2021-09-09 13:53:08

区块链加密货币技术

2020-12-30 07:55:37

C++转换类型

2021-03-11 14:46:05

C++类型转换语言

2022-08-31 07:04:50

Bean作用域

2022-03-11 15:40:49

PaaS云服务

2021-06-15 09:12:19

TypeScriptTypeScript Javascript

2022-02-25 09:06:02

TypeScripnever工具

2021-05-07 16:19:36

异步编程Java线程

2021-07-27 06:06:34

TypeScript语言运算符

2010-09-25 14:48:55

SQL连接

2021-01-19 11:56:19

Python开发语言

2024-03-12 08:29:28

C++类型转换方式

2021-11-30 09:00:00

TypeScriptJ​​avaScrip开发
点赞
收藏

51CTO技术栈公众号