Vite+Ts+pnpm自定义组件发布到私有npm仓库

Vite+Ts+pnpm自定义组件发布到私有npm仓库

创建发布流程

新建vite相关项目

1. 新建文件夹，并用打开当前终端输入pnpm init初始化仓库

2. 新建pnpm.workspace.yaml文件，说明共用空间

packages:
  # all packages in direct subdirs of packages/
  - 'projects/**'

3. 新建projects文件夹，并在终端输入cd projects进入此文件位置

4. 终端输入pnpm create vite，创建一个demo-ui文件

5. cd demo-ui运行pnpm install 安装相应包

编写自定义组件

1. 在demo-ui文件下新建lib文件夹

2. 在lib文件夹下新建index.ts文件作为打包导出的入口文件，暂不编写内容

3. lib中新建自定义组件demoComp.vue，并编写自己的组件内容，代码自由发挥

4. 在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)
  }
}

5. 全局解决引入vue文件找不到模块问题

// tsconfig.json同级文件夹下新建vue.d.ts文件，文件名可随意编写，但在tsconfig.json中引入时必须一致declaremodule '*.vue' { import { defineComponent } from'vue'const Component: ReturnType<typeof defineComponent> 
exportdefault Component }

6. 在tsconfig.json中加入识别文件

// include与compilerOptions同级别，默认的include数组中包含很多识别文件类型，只需在其中多加一条，此条与新建文件名一致"include": ["vue.d.ts"],

配置vite并打包文件

1. 配置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'
    }
  },
})

2. 打包pnpm run build

3. 配置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",

4. 新建本地vite项目用于测试组件

5. 进入新建的本地项目pnpm install 包名

// 包名为打包好的组件的pageage.json中的name名称，注意尽量不要和公开npm的包重名，优先下载共有npm中的包
// 下载好后在引入的项目中呈现为
"包名": "workspace:^0.0.0",

6. 引入到想要调用组件的位置，注意引入打包好的css文件，否则没有样式，然后正常组件调用即可

import {DemoComp} from '包名'
import '包名/demo-ui/dist/style.css'

上传到私有npm

1. nrm切换私服host地址nrm use **host，use后面为自己命名的host地址名称

2. npm login登录私服地址，账号密码向运维申请

3. npm publish

其他项目引入

1. nrm切换私服host地址nrm use **group，use后面为自己命名的group地址名称

2. 在引入项目中安装此插件

3. 引入插件