vue3+vite+ts 发布npm 组件包

1.创建项目

npm create vite@latest my-vue-ts-component -- --template vue-ts

可以强制把它变成公开包,发布

npm publish --access public

查看已发布包的元数据

npm view @zhy/map-utils

显示你当前 npm 客户端登录的「用户名」

npm whoami

2. 禁用 allowImportingTsExtensions

如果你不需要强制要求导入路径以 .ts 结尾,可以在 tsconfig.json 中禁用这个选项:

{

"compilerOptions": {

"allowImportingTsExtensions": false

}

}

3.配置 Vite 打包为组件库模式

import { defineConfig } from 'vite';

import vue from '@vitejs/plugin-vue';

import path from 'path';

export default defineConfig({

plugins: [vue()],

build: {

lib: {

entry: path.resolve(__dirname, 'src/index.ts'),

name: 'MyVueTsComponent',

fileName: (format) => `my-vue-ts-component.${format}.js`,

},

rollupOptions: {

external: ['vue'],

output: {

globals: {

vue: 'Vue',

},

},

},

},

});

4.确保 package.json 文件包含以下字段

{

"name": "@your-username/my-vue-ts-component",

"version": "1.0.0",

"description": "A Vue 3 + TypeScript component template",

"main": "./dist/my-vue-ts-component.umd.cjs",

"module": "./dist/my-vue-ts-component.es.js",

"files": [

"dist"

],

"peerDependencies": {

"vue": "^3.0.0"

},

"scripts": {

"build": "vue-tsc && vite build"

}

}

相关推荐
翻斗花园刘大胆4 分钟前
JavaWeb之快递管理系统(完结)
java·开发语言·前端·jvm·spring·servlet·java-ee
正义的大古8 分钟前
OpenLayers地图交互 -- 章节四:修改交互详解
前端·javascript·vue.js
深耕AI1 小时前
【9/10】前端认证整合:Vue.js 中处理 JWT,实现登录页面和受保护路由
前端·javascript·vue.js
千里码aicood4 小时前
springboot+vue兼职招聘小程序(源码+文档+调试+基础修改+答疑)
vue.js·spring boot·小程序
摩羯座-185690305944 小时前
VVIC 平台商品详情接口高效调用方案:从签名验证到数据解析全流程
java·前端·数据库·爬虫·python
木觞清5 小时前
补环境-JS原型链检测:在Node.js中完美模拟浏览器原型环境
开发语言·javascript·node.js
我是华为OD~HR~栗栗呀5 小时前
华为od-前端面经-22届非科班
java·前端·c++·后端·python·华为od·华为
知识分享小能手5 小时前
React学习教程,从入门到精通,React Router 语法知识点及使用方法详解(28)
前端·javascript·学习·react.js·前端框架·vue·react
黄毛火烧雪下5 小时前
React中Class 组件 vs Hooks 对照
前端·javascript·react.js
gnip6 小时前
工作常用设计模式
前端·javascript