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

参考文档

1. https://rollupjs.org/guide/en/#outputglobals
2. https://v2.vitejs.dev/config/#build-target