【vue3】常见问题05：项目改造，打包成库模式

ZhangLargeCake

已于 2024-09-26 15:56:35 修改

阅读量510

点赞数 4

分类专栏： vue3 文章标签： vue 前端 typescript

于 2024-08-22 15:34:47 首次发布

本文链接：https://blog.csdn.net/elanbom/article/details/141427562

版权

vue3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

项目环境：

{
	"pnpm": 8.8.0,
	"node": v18.20.2,
	"vue": "3.4.21",
	"vite": "5.2.6"
}

项目场景：

项目场景：把一个写好的组件或者项目打包为库模式，保证可以发布到npm作为插件使用

~~本文不会涉及到npm怎么发包~~

解决方案：

本文基于vite配置进行改造，官方方案可以参考这里的文档

先打开vite.config.ts文件

/// <reference types="vitest" />
import { type ConfigEnv, loadEnv, type UserConfigExport } from "vite"
import { resolve } from 'path'
import { defineConfig } from 'vite'

export default ({ mode }: ConfigEnv): UserConfigExport => {
  return {
      rollupOptions: {
          output: {
              // 为umd模式提供全局变量
              globals: {
                  vue: "Vue",
                  "element-plus": "ElementPlus",
                  pinia: "Pinia",
                  axios: "axios",
                  "vue-router": "VueRouter"
              },
              dir: "lib"
          },
          // 打包为库的时候不打包的插件
          external: ["vue", "elementPlus", "pinia", "axios", "vue-router"]
      },
      // 如果是打包成库模式，添加相应的配置
      lib: {
          entry: resolve(__dirname, "src/lib/index.ts"),
          // 导出库的名称
          name: "mylib",
          fileName: (format) => `mylib.${format}.js`,
          formats: ["es", "umd", "iife"]
          // 其他库打包配置
      }
  }
}

配置package.json

如果你的插件依赖于vue、vue-router、pinia这些插件，为了避免重复引入，请把依赖配置到peerDependencies属性里

{
  "name": "mylib",
  "version": "1.0.0",
  "description": "这个是描述",
  "type": "module",
  "files": ["lib", "index.d.ts"],
  "scripts": {
        "build:lib": "vite build --mode lib",
   },
  "main": "./lib/mylib.umd.js",
  "module": "./lib/mylib.es.js",
  "types": "./lib/index.d.ts",  // 指定库的类型声明文件
  "exports": {
    ".": {
      "import": "./lib/mylib.es.js",
      "require": "./lib/mylib.umd.js"
    }
  },
  "peerDependencies": {
   		"vue": "3.4.21",
        "vue-router": "4.3.0",
        "pinia": "2.1.7",
  },
  "keywords": ["vue3","关键字"，"用于npm检索"]
}

第1步的配置里，使用了入口文件为src/lib/index.ts，现在配置一下入口文件代码:

Tips: 配置完成后，使用 npm run build:lib 命令进行打包

// 文件开头可以导入一些全局样式
import "@/styles/index.scss"

/**
 * 安装插件的函数。
 *
 * 该函数旨在向指定的应用程序(app)安装一个插件，该插件的主要功能是向应用程序的路由系统中添加新的路由配置。
 *
 * @param {Object} app - 要安装插件的应用程序对象。这个对象通常是一个Vue框架的应用实例。
 * @param {Object} options - 插件的配置选项对象。这个对象可以包含各种配置信息。
 * @returns {Object} 返回应用程序对象，确保函数可以作为链式调用的一部分。
 */
const install = (app, options) => {
  // 在这里编写插件代码
  const a = options?.a
  console.log("-------library-plugin-------a-------", a)
 // 这里可以进行一些全局组件的导入，比如你封装的需要注册的组件
  return app
}

export default {
  install,
  // 导出一些自定义的组件
}

if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue)
}

总结

/// ：这是一个引用指令，表示使用了 Vitest 的类型定义。
ConfigEnv 和 UserConfigExport 是从 Vite 中导入的类型，用于定义配置时的类型安全。
resolve 是从 Node.js 的 path 模块中导入的函数，用于解析路径。
defineConfig 是 Vite 的一个函数，通常用来帮助定义和验证配置。
rollupOptions.output.globals 这个对象指定了在打包为 UMD 模式时，外部依赖（如 vue，element-plus 等）的全局变量名称。当你在浏览器中通过 <script> 标签引入这个库时，这些全局变量会被用到。
rollupOptions.external：指定哪些依赖包在打包时不被打包进库文件，而是在使用库时通过外部引入,这些包被认为是“外部依赖”，需要用户在使用时手动提供;配置中明确了外部依赖（如 vue、element-plus 等）不会被打包进库文件。

lib：项目打包成库时的配置
- entry：指定打包的入口文件，通常是你的库的主文件。
- name：设置导出的库的全局变量名称，尤其在 UMD 和 IIFE 格式中，这个名称将作为全局变量使用。
- fileName：一个函数，根据不同的打包格式生成不同的文件名。format 是 es、umd 或 iife 之一，函数返回类似 mylib.es.js 这样的文件名。
- formats：指定要生成的打包格式。这里包括 ES module (es)、UMD (Universal Module Definition) 格式和 IIFE (Immediately Invoked Function Expression) 格式。