源起
事情的起因是这样的，我们公司有个可配置大屏的项目是用的 vue-grid-layout 这个组件。
最近公司项目要升级到 vue3，所以想着把所有组件都替换为 vue3，所以就去搜寻了一下。发现这个仓库支持 vue3 的 Issue 从 2020 年 7 月已经挂到现在了。
现在已有的支持 vue3 的项目也是用 gogocode 之类的 AST 工具转的，一来没有用组合式API 编写，二来也没有 TS 支持。
所以就自己把代码重写了下，随便修复了下 BUG。然后就想着把改好的代码发布出来，万万没想到啊，发布个组件居然这么难。
经过
因为之前也没有发布过 npm，所以去查了下，看起来就是 npm login， npm publish 就可以了。这不是手到擒来，小菜一碟吗。
打包，注册，发布。虽然中间有点小磕绊，靠搜索引擎也顺利解决了。
新建个项目测试一下
我写好的 TS 类型呢? 而且引用也不像别的开源项目，直接 import 项目名就行，我的怎么还得写路径。。。
唔，先去别的开源项目学习下。
生成一个 vue 组件的类型声明要写这么多东西吗，对不起，学不动，告辞。。。
继续面向搜索引擎编程，一翻寻找后，还真让我找到个现成的轮子。vite-plugin-dts
作者是这么说的，详情可以看作者的这篇文章
看文档，写配置，打包。
。。。
。。。
好像哪里不对，我的 dist 文件夹下还是没 vue 组件的声明啊，是不是我姿势不对。嗯，把作者的 example 下载下来看看。
果然不是我姿势不对，是插件出 BUG 了。。。
因为是开源项目，也不确定作者有没有时间处理，就想先自己看看。结果看了半天也没看出来哪的问题。没办法，只能先给作者提个 Issue 了。
没想到作者回复还挺快，不过貌似因为调用组件太多，也不确定是哪方出的问题。而且我尝试了下，貌似锁定版本也没有解决问题。
看作者说只有在 pnpm 项目才会有问题，我先把包管理器换成 npm 试了下，果然组件声明已经有了。
声明的问题解决了，现在就是 import 的问题了。找文档，看开源项目。最后在 package.json 里添加了两行。
"main": "dist/v3-grid-layout.umd.js",
"module": "dist/v3-grid-layout.es.js",
打包，发布，测试。
。。。
。。。
import { GridItem, GridLayout } from "v3-grid-layout";
嗯，引用路径正常了。
但是，为啥还是没有声明啊啊啊，看了下 node_modules 下的文件，唔，组件声明确实有了，但貌似要手动引用。这个好像不对啊，我平时用其他库时，也没有手动引用啊。
又是一顿面向搜索引擎编程，package.json 里又加了一行。
"types": "dist/index.d.ts",
打包，发布，测试。
组件功能正常，声明约束正常。
你以为这样就完了吗，当然没有。。
开源项目怎么能没有文档呢，看了下原项目。唔，文档是用 Vuepress 写的。先查查资料。
vue3 貌似得用 Vuepress2 了，看文档，面向搜索引擎编程。
文档首页有了，
文档目录有了，
该写用例了，看下原项目的用例。
？？？ 这么两大坨都要用 vue3 重写吗？对不起，写不动，告辞。。。
但是文档还是得写啊，继续找其它工具。。。
最后选了storybook，为啥选这个？因为这个用户可以自己修改参数同步查看变化，而不需要每种参数都要写一个例子。（就是懒，不想写那么多。。。）
当然文档也写的不是一帆风顺的，不过面向搜索引擎编程牛啊，磕磕绊绊的总算完成了。 zhl1232.github.io/v3-grid-lay…
后续
实在是没想到，本来代码都已经写完了。只是一个发布居然还这么曲折。作为一个菜鸟真是太难了。
不过既然开坑了，这个项目会一直维护下去的。
ps: 上面还有很多遇到的奇怪问题没有列出来的。
比如 storybook 是用 React 写的，所以 React 的 JSX 声明和 Vue 的 JSX 声明是冲突的。。。github.com/johnsoncode…, 用了其中的一个方案，把 @types/react 给删了。。
也不知道如果有用微服务还是 monorepo 的，同时存在 React 项目和 Vue 项目要怎么解决，手动改路径吗。。
还有更离谱的，我想要在 npm install 之前做一些脚本，结果 preinstall 居然是在 install 之后执行的。。 github.com/pnpm/pnpm/i…
ps2: 文章发布之时发现，我的组件全局引入还是没有声明约束。。。好了，我去改 BUG 了。
