vue3+ts + vite 封装组件发布npm包

1.创建项目

使用vite 去创建项目

pnpm create vite

1. 删除src下的assets文件
2. 删除src下components下文件
3. 清空App.vue中的文件内容，后续做测试使用
4. 新建src/package 目录 用于存放待发布的方法或者组件

2. 划分目录

其中types 用于声明ts 类型 package 为待发布的包，其中待发布的组件跟方法都在这里定义 package/index.js 为入口文件

3. 项目配置

• 配置vite.config.js 需要 安装 vite-plugin-dts 用于产生类型声明文件 并在vite.config.js 中配置

需要三处配置

1. 配置dts 用于生成.d.ts 声明文件

2. 配置lib 用于配置 打包成库的配置项 就是上传npm 配置项 其中entry 为打包的入口文件路径 name: 打包的名称 （x现在随便起的不确定作用） fileName: 打包后的文件名称

3. 配置rollup

• 配置 package.json

需要显示的去指定 main: 指定在node 环境的文件

module 指定在ESModule 中 文件路径

types: 指定ts 类型提示路径

files: 将哪些文件发布到npm 中

需要注意的是：在vite.config.js 中配置的lib > fileName 路径应该跟 package.json 中的路径相对应

4. 开发组件

在package/compoents 开发组件 开发之后，在入口文件引入

5. 发布组件

1. 项目进行打包编译
2. 登录npm
3. 回到项目中 执行 npm whoami 查看是否登录 如果没有登录 执行 npm login
4. 执行 npm publish

6. 注意事项

遇到的坑 ite-plugin-dts组件默认取的是tsconfig.json配置，但是vite创建的项目中tsconfig.json被拆分成2个文件，所以tsconfig.json中的include配置项未生效。如下图：

需要再dts 配置项去指定 dts 解析的路径