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

路过君

发布于 2022-09-23 19:55:34

2.1K0

发布于 2022-09-23 19:55:34

文章被收录于专栏：路过君BLOG from CSDN

版本

vite 3.0.7 vue 3.2.27

所需依赖

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

步骤

1. 修改package.json

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

"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"
},

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

启用lib模式
配置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'
                }
            }
        }
    }
})

3. 创建组件库入口模块

./components/index.ts

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

// 按需导入用
export {
	MyComponent 
}
// 全局导入用
export default {
    install: (app: App) => {
        app.component('MyComponent', MyComponent)
    }
}