vite+vue3+ts开发组件库，发布npm

版本

vite 3.0.7
vue 3.2.27

所需依赖

@types/node 使用resolve解析项目路径
vite-plugin-dts 1.4.1 自动生成ts声明文件

步骤

1. 修改package.json

1. 修改配置模块入口指向构建输出的js文件

"main": "./dist/my-lib.umd.cjs",
"module": "./dist/my-lib.js"
1
2

2. 修改ts声明文件指向构建输出的js声明文件

"types": ".dist/components/index.d.ts"
1

3. 配置模块导入对应关系

"exports": {
  ".": {
    "import": "./dist/my-lib.js",
    "require": "./dist/my-lib.umd.cjs"
  }
},
1
2
3
4
5
6

4. 修改需要发布的文件清单

"files": [
  "package.json",
  "README.md",
  "LICENSE",
  "dist"
],
1
2
3
4
5
6

5. 设置发布配置
   默认私有发布，需要收费，这里配置公共发布

"publishConfig": {
  "registry": "https://registry.npmjs.org",
  "access": "public"
},
1
2
3
4

2. 修改vite配置vite.config.ts

1. 启用lib模式
2. 配置vite-plugin-dts插件

import {resolve} from 'path'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from 'vite-plugin-dts'
// https://vitejs.dev/config/
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'
                }
            }
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

3. 创建组件库入口模块

./components/index.ts

import MyComponent from "./my-component'"
import {App} from "vue";

// 按需导入用
export {
	MyComponent 
}
// 全局导入用
export default {
    install: (app: App) => {
        app.component('MyComponent', MyComponent)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4. 构建项目

5. 发布npm

1. 登录npm

npm login
1

2. 发布(由于在package.json中指定了公共发布，这里不需要参数 --access public)

npm publish
1