持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

设想

之前对开发一个组件库还是很感兴趣的，但在人手一个组件库时代，兴趣大减，更多的是想在现有的组件库上提pr，不想重复造轮子。

随着 svelte 跟 monorepo 热度变高，有两个点让我很感兴趣

1. svelte生态还是起步状态，现在参与社区建设以后就是半个元老了，而且svelte的作者，知名度还是很高的，宁做鸡头，不做凤尾
2. monorepo的话也是很感兴趣的，同时我自己实现了一个：@abmao/pkgs。文章链接👉🏻好家伙，这是写了一个“lerna”。用到这个工具是因为我想让每个组件都发布成一个npm包，然后总的组件库也发布成一个npm包，前者简直就是天然的按需加载

svelte之前用了下，画动有点与众不同，我把vue的popup组件试图转变成svelte的时候，需要把css的animation和transform改成js方式去写。

结合

大致架构如此

- packages // 用来放组件
- pkgs.json // @abmao/pkgs的配置文件
- package.json
- pnpm-lock.yaml
- pnpm-workspace.yaml

上面说了通过monorepo做的两种发布方式，单个组件发布与一整个库发布。比较讲究的是一整库发布，到底以何种形式去执行

1. 根目录引入所有的packages进行打包发布
2. 等packages里面都打包完后，把所有构建物都复制到根目录的dist目录里面发布
3. 根目录的package.json直接引入packages的包，然后在index.ts导出打包 2跟3相对于1方便在于不用再次对所有packages打包，但是同一技术栈，构建物多多少少都会有部分重复，但如果我们用1方式去打做的话，相对于1和2，构建物大小应该是会有所减少，就是需要再次打包，构建物大小会直接影响到生产环境，所以再次打包还是值得的

题外话

假设现在有100个组件，但是我只改了其中1个组件，使用lerna运行打包的话，会把所有包都打包一遍，而使用@abmao/pkgs，可以实现按需打包，只会对修改了的组件和被影响到的组件进行打包，大大缩短打包时间，yes！！