vite构建组件
初始化项目
偷个懒直接使用的vite 提供的模板
# yarn create vite [targetDir] [options]
# 只有在当前文件夹内有内容需要覆盖
yarn create vite . --force
组件管理
例如我们需要打包components下的HelloWorld组件
组件管理入口文件
文件相对路径 src/components/index.ts
import HelloWorld from './HelloWorld.vue';
export { HelloWorld };
vite配置
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import dts from "vite-plugin-dts"; // 打包vue、ts静态描述
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), dts()],
build: {
// 参考 https://v2.vitejs.dev/config/#build-rollupoptions
rollupOptions: {
external: ["vue"], // 不需要打包的外置依赖
output: { // 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: "Vue",
},
},
},
// 参考 https://v2.vitejs.dev/config/#build-lib
lib: {
entry: "./src/components/index.ts",
name: "hello",
formats: ["es", "cjs", "umd", "iife"],
fileName: (format: string) => `hello.${format}.js`,
},
},
});
执行构建
yarn build
输出

配置文件package.json
修改 package.json 中发布到 npm 的字段
- name:包名,该名字是唯一的。可在npm远程源搜索名字,如果存在则需换个名字。
- version:版本号,每次发布至 npm 需要修改版本号,不能和历史版本号相同。
- description:描述。
- main:入口文件,该字段需指向我们最终编译后的包文件。
- typings:types文件,TS组件需要。
- keyword:关键字,以空格分离希望用户最终搜索的词。
- author:作者信息
- private:是否私有,需要修改为 false 才能发布到 npm
- license: 开源协议
- author:作者 {name, email, url}
- files:发布之后展示的文件或者文件夹 [‘dist’, ‘types’, ‘package.json’]
- homepage:插件主页
示例
{
"name": "auth_module",
"version": "0.0.1",
"license": "MIT",
"typings": "",
"author": {
"name": "makai",
"email": "makai@basestonedata.com"
},
"main": "./dist/auth_module.umd.js",
"homepage": "",
"keywords": [
"权限模块"
],
"files": [
"dist",
"package.json"
],
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
}
}
发布流程
请参考 :https://www.soulferry.xyz/?p=763