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"

}

}

相关推荐
FreeBuf_16 小时前
npm供应链攻击威胁开发环境安全
前端·安全·npm
longze_716 小时前
开源npm引导guide组件
前端·javascript·npm·开源·开源软件·guide·引导组件
longze_716 小时前
npm 打包上传命令,撤销错误版本
前端·npm·node.js
扯淡的闲人16 小时前
关于NPM(Node Package Manager)的详细介绍
前端·npm·node.js
wow_DG17 小时前
【Vue2 ✨】Vue2 入门之旅(四):生命周期钩子
开发语言·javascript·ecmascript
网络研究院21 小时前
苹果 Safari 地址栏可能被超大光标视觉欺骗
前端·safari·苹果
slongzhang_1 天前
html添加水印
前端·html
Small black human1 天前
前端-什么是Vue
前端·javascript·vue.js
IT 前端 张1 天前
Axios与Ajax:现代Web请求大比拼
前端·javascript·ajax