vite 3.0.7 vue 3.2.27
@types/node 使用resolve解析项目路径 vite-plugin-dts 1.4.1 自动生成ts声明文件
"main": "./dist/my-lib.umd.cjs", "module": "./dist/my-lib.js"修改ts声明文件指向构建输出的js声明文件
"types": ".dist/components/index.d.ts"配置模块导入对应关系
"exports": { ".": { "import": "./dist/my-lib.js", "require": "./dist/my-lib.umd.cjs" } },修改需要发布的文件清单
"files": [ "package.json", "README.md", "LICENSE", "dist" ],设置发布配置 默认私有发布,需要收费,这里配置公共发布
"publishConfig": { "registry": "https://registry.npmjs.org", "access": "public" },
import {resolve} from 'path' import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import dts from 'vite-plugin-dts' // http://218.206.242.148:12345/images/20_tencent/20220924/dtxisyoncr5 export default defineConfig({ plugins: [vue(), dts()], build: { lib: { // 入口指向组件库入口模块 entry: resolve(__dirname, 'src/components/index.ts'), name: 'my-lib', // 构建生成的文件名,与package.json中配置一致 fileName: 'my-lib' }, rollupOptions: { // 确保外部化处理那些你不想打包进库的依赖 external: ['vue'], output: { globals: { // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 vue: 'Vue' } } } } })
./components/index.ts
import MyComponent from "./my-component'" import {App} from "vue"; // 按需导入用 export { MyComponent } // 全局导入用 export default { install: (app: App) => { app.component('MyComponent', MyComponent) } }
npm login发布(由于在package.json中指定了公共发布,这里不需要参数 --access public)
npm publish