首页 前端知识 Vite Ts pnpm自定义组件发布到私有npm仓库

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

2024-08-04 22:08:51 前端知识 前端哥 788 134 我要收藏

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

创建发布流程

新建vite相关项目
  1. 新建文件夹,并用打开当前终端输入pnpm init初始化仓库

  1. 新建pnpm.workspace.yaml文件,说明共用空间

packages:
  # all packages in direct subdirs of packages/
  - 'projects/**'
  1. 新建projects文件夹,并在终端输入cd projects进入此文件位置

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

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

编写自定义组件
  1. 在demo-ui文件下新建lib文件夹

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

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

  1. 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)
  }
}
  1. 全局解决引入vue文件找不到模块问题

// tsconfig.json同级文件夹下新建vue.d.ts文件,文件名可随意编写,但在tsconfig.json中引入时必须一致declaremodule '*.vue' { import { defineComponent } from'vue'const Component: ReturnType<typeof defineComponent> 
exportdefault Component }
  1. 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'
    }
  },
})
  1. 打包pnpm run build

  1. 配置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",
  1. 新建本地vite项目用于测试组件

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

// 包名为打包好的组件的pageage.json中的name名称,注意尽量不要和公开npm的包重名,优先下载共有npm中的包
// 下载好后在引入的项目中呈现为
"包名": "workspace:^0.0.0",
  1. 引入到想要调用组件的位置,注意引入打包好的css文件,否则没有样式,然后正常组件调用即可

import {DemoComp} from '包名'
import '包名/demo-ui/dist/style.css'
上传到私有npm
  1. nrm切换私服host地址nrm use **host,use后面为自己命名的host地址名称

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

  1. npm publish

其他项目引入
  1. nrm切换私服host地址nrm use **group,use后面为自己命名的group地址名称

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

  1. 引入插件

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14777.html
标签
评论
发布的文章

RapidJSON介绍

2024-08-14 00:08:38

jQuery 4 beta 震撼发布

2024-08-14 00:08:36

cJSON的使用

2024-08-14 00:08:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!