Vite+Ts+pnpm自定义组件发布到私有npm仓库
创建发布流程
新建vite相关项目
新建文件夹，并用打开当前终端输入pnpm init初始化仓库
新建pnpm.workspace.yaml文件，说明共用空间
packages:
# all packages in direct subdirs of packages/
- 'projects/**'新建projects文件夹，并在终端输入cd projects进入此文件位置
终端输入pnpm create vite，创建一个demo-ui文件
cd demo-ui运行pnpm install 安装相应包
编写自定义组件
在demo-ui文件下新建lib文件夹
在lib文件夹下新建index.ts文件作为打包导出的入口文件，暂不编写内容
lib中新建自定义组件demoComp.vue，并编写自己的组件内容，代码自由发挥
在index.ts中导入组件，并注册组件
import { App } from'vue'// 引入DemoComp.vue会出现红色波浪线，找不到模块“./DemoComp.vue”或其相应的类型声明下一步骤为解决方案import DemoComp from'./DemoComp.vue'export { DemoComp }
exportdefault {
install(app: App) {
app.component(DemoComp.name, DemoComp)
}
}全局解决引入vue文件找不到模块问题
// tsconfig.json同级文件夹下新建vue.d.ts文件，文件名可随意编写，但在tsconfig.json中引入时必须一致declaremodule '*.vue' { import { defineComponent } from'vue'const Component: ReturnType<typeof defineComponent>
exportdefault Component }在tsconfig.json中加入识别文件
// include与compilerOptions同级别，默认的include数组中包含很多识别文件类型，只需在其中多加一条，此条与新建文件名一致"include": ["vue.d.ts"],配置vite并打包文件
配置vite库模式
// 以下代码为原vite.config.ts中新增部分，不改变原有内容，根据本地文件，将相关代码复制到该文件中import { resolve } from'path'import { defineConfig } from'vite'import dts from'vite-plugin-dts'exportdefault defineConfig({
// 打包的声明文件的范围为lib文件夹
plugins: [vue(), dts({ include: './lib'})],
build: {
lib: {
// 入口文件地址
entry: resolve(__dirname, 'lib/index.ts'),
name: 'DemoLib',
formats: ['es'],
fileName: 'gf-lib'
}
},
})打包pnpm run build
配置package.json文件
// 如果需要发布到公共仓库，设置为false，发布私有仓库的话设置为true"private": false,
// 明确type字段，若不定义，node会默认按照commonJs规范处理
"type": "module",
// 配置打包上传文件到npm的文件夹内容
"files": ["dist"],
// 使用require('xxx')方式引入，即引入此文件
"main": "./dist/gf-ui.umd.cjs",
// import x from 'xxx'方式引入组件，即引入此文件
"module": "./dist/gf-ui.js",
// 组件ts类型声明文件的入口文件
"types": "./dist/index.d.ts",新建本地vite项目用于测试组件
进入新建的本地项目pnpm install 包名
// 包名为打包好的组件的pageage.json中的name名称，注意尽量不要和公开npm的包重名，优先下载共有npm中的包
// 下载好后在引入的项目中呈现为
"包名": "workspace:^0.0.0",引入到想要调用组件的位置，注意引入打包好的css文件，否则没有样式，然后正常组件调用即可
import {DemoComp} from '包名'
import '包名/demo-ui/dist/style.css'上传到私有npm
nrm切换私服host地址nrm use **host，use后面为自己命名的host地址名称
npm login登录私服地址，账号密码向运维申请
npm publish
其他项目引入
nrm切换私服host地址nrm use **group，use后面为自己命名的group地址名称
在引入项目中安装此插件
引入插件
