如果组件需要复用,就要能够独立发布和部署,被其它应用引用。开发组件时,需要创建引用组件的app便于开发和测试,而发布时,只应该包括组件部分。使用vite可以实现组件的打包发布。
需要创建一个入口文件,在这个文件中引用并导出组件:
import hello from '../components/HelloWorld.vue'
export {hello}
假设这个文件的名称为main.js,位于src/lib目录中,这个文件区别于测试环境的main.js。
在vite.config.js中增加build项,用来指定入口文件,输出目录,并且排除vue等基础组件,减少打包的尺寸。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
lib: {
// Could also be a dictionary or array of multiple entry points
entry: resolve(__dirname, 'src/lib/main.js'),
name: 'MyLib',
// the proper extensions will be added
fileName: 'my-lib',
},
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: ['vue'],
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: 'Vue',
},
},
},
},
})
在package.json中指定打包的入口:
"name": "my-vue-app",
"private": true,
"version": "0.0.1",
"type": "module",
"files": ["dist"],
"main": "./dist/my-lib.umd.cjs",
"module": "./dist/my-lib.js",
"exports": {
".": {
"import": "./dist/my-lib.js",
"require": "./dist/my-lib.umd.cjs"
}
},
运行npm run build可以生成发布包。
创建一个新的项目进行测试,如果组件在本地目录中,可以使用npm install <路径>进行安装。
在需要引用的页面中:
<script setup>
import {hello} from 'my-vue-app'
</script>
<template>
<hello msg="你好" />
</template>
网友评论