Vue组件库开发实践与管理-优快云博客

本文链接：https://blog.youkuaiyun.com/wsq_bsdn/article/details/115965625

本文详细介绍了Vue组件库的开发流程，包括快速原型开发、结合Element-UI进行原型开发、组件管理、Monorepo的使用、Storybook的集成、yarn工作区的配置、Lerna工具的运用、Vue组件的单元测试、使用rollup打包以及文件清理等关键步骤，旨在提供一套完整的组件库开发与管理方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

快速原型开发

VueCli提供了一个插件可以进行原型快速开发，需要先全局安装@vue/cli-service-global插件，然后再通过VueCli创建项目。开发时可以使用vue serve 快速查看组件的运行效果

vue serve 如果不指定参数默认会在当前目录下寻找一些入口文件：main.js、index.js、App.vue、app.vue。
可以传入参数指定要加载的组件 vue serve ./src/post.vue

结合Element-ui进行快速的原型开发

使用命令行vue add element 来添加 elementUI插件
然后加载ElementUI，使用Vue.use()安装插件
Element-ui就是使用Async-validator进行表单验证的，组件库开发时可以考虑使用它来完成表单验证。

组件的管理

使用时可以按需加载所需的组件的实现方式：
1、Multirepo(Multiple Repository)：每一个组件对应一个项目
2、Monorepo（Monolithic Repository)：一个项目仓库管理多个组件，组件可以按需加载

使用Monorepo管理组件库

使用Monorepo管理组件库需要遵循以下规范：

组件所在的包都存放在一个文件夹package中
组件内部的文件结构类似，方便管理。

Storybook

Storybook是一个可视化组件的展示平台，在隔离的开发环境中，以交互式的方式展示组件。
支持多种框架：
在这里插入图片描述
storybook的安装

在已有组件库项目中执行命令行 npx sb init --type vue，其中type是用来指定框架的，如果没有指定会开启命令行交互，让用户选择框架。

init命令会执行下列操作：

安装依赖
在package.json中设置storybook启动命令
添加storybook默认配置
生成示例story

执行完init命令之后，运行yarn storybook命令启动storybook。

yarn 工作区（yarn workspace）

开启yarn工作区要在项目根目录下package.json中新增如下配置
在这里插入图片描述
开启工作区之后，会自动将公共的依赖存放到工作区所在的根目录下。
“private”: true 表示提交到github或发布到npm时禁止提交根目录下的文件
“workspaces”: [ “packages/*” ] 表示要管理的所有包的路径。

给工作区根目录安装开发依赖
```
yarn add jest -D -W
```
给指定工作区的包安装依赖
```
yarn workspace lg-button add lodash@4
```
lg-button是包的名字，文件夹中package.json中的name
给工作区的所有包安装依赖
```
yarn init
```

Lerna

Lerna是一个优化使用git和npm管理多包仓库的工作流工具，babel就是用它来管理代码仓库的。用于管理具有多个包的javascript项目，可以一键把代码提交到git和npm仓库。

lerna和yarn workspace一般组合在一起使用，yarn workspace管理包的依赖，lerna管理代码仓库的发布

Lerna的使用

全局安装 lerna：npm i lerna -g
初始化: 在项目根目录下运行命令 lerna init。
如果当前项目没有使用git，会进行git的初始化。
发布：运行lerna publish会将packages中的包发布到npm仓库
执行lerna publish发布之前，要确定以下是否已经完成以下操作：
1. 代码是否提交到GitHub仓库
2. 是否登录npm，使用npm whoami查询当前登录npm的用户，如果未登录，则执行npm login进行登录操作。
3. 确保当前的镜像源是https://reigstry.npmjs.org/ ，使用npm config get registry查看镜像源配置。如果不是则使用命令修改镜像源。npm config set registry https://registry.npmjs.org/

Vue组件的单元测试

使用Jest插件来完成测试。

Jest集成与配置

安装依赖：在工作区所在根目录下安装依赖

yarn add jest @vue/test-utils vue-jest babel-jest -D -W

配置jest与babel

// jest.config.js
module.exports = {
  testMatch: [ "**/__tests__/**/*.[jt]s?(x)" ], // 测试文件的位置
  moduleFileExtensions: [
    'js',
    'json',
    // 处理 *.vue 文件
    'vue'
  ],
  // 文件转换配置
  "transform": {
    ".*\\.(vue)$": "vue-jest", // 使用vue-jest处理.vue文件
    ".*\\.(js)$": "babel-jest", // 使用babel-jest处理.js文件
  }
}

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env'
    ]
  ]
}

vue-test依赖babel@6，和项目中的babel的版本不一致，可以通过安装babel桥接来解决这个问题。

yarn add babel-core@bridge -D -W

Jest常用的方法
在这里插入图片描述
toMatchSnapshot()第一次运行时会生成一个快照文件，之后的每次运行都会与上一次的快照对比，如果不相同则表示测试失败。 jest -u 命令能重新生成快照，即更新快照。

Vue Test Util常用方法
在这里插入图片描述

使用rollup打包

对工作区中的某个组件打包

工作区根目录下安装依赖
```
yarn add rollup rollup-plugin-terser rollup-plugin-vue@5.1.9 vue-template-compiler -D -W
```
rolup-plugin-vue一定要指定版本，6.x版本是用来转换vue3的。

在要打包的组件所在文件夹中创建rollup配置文件rollup.config.js

// rollup.config.js
import { terser } from 'rollup-plugin-terser' // 压缩文件
import vue from 'rollup-plugin-vue' // vue编译转换

module.exports = [
  {
    input: 'index.js',
    output: [
      {
        file: 'dist/index.js', // 输出文件
        format: 'es'// 输出文件规范格式
      }
    ],
    plugins: [
      vue({
        css: true, // 将css代码通过style标签注入
        compileTemplate: true // 将template转换成render函数
      }),
      terser() // 压缩文件
    ]
  }
]

运行命令行 yarn workspace sq-button build。sq-button是包中package.json中的name。

全局打包

全局打包即打包工作区中的所有组件

工作区根目录下安装依赖
```
yarn add @rollup/plugin-json rollup-plugin-postcss @rollup/plugin-node-resolve -D -W
```
@rollup/plugin-json 将json文件作为模块加载
@rollup/plugin-node-resolve 将依赖第三方包打包进来

工作区根目录下创建配置文件rollup.config.js
主要功能是为工作区下的所有组件包添加rollup.config.js配置。

import fs from 'fs'
import path from 'path'
import json from '@rollup/plugin-json'
import vue from 'rollup-plugin-vue'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'
import { nodeResolve } from '@rollup/plugin-node-resolve'

const isDev = process.env.NOOD_ENV !== 'production'

// 公共插件
const plugins = [
  vue({
    css: true,
    compileTemplate: true
  }),
  json(),
  nodeResolve(),
  postcss({
    // 把 css 注入到 style 标签中
    // inject: true,
    // 把 css 通过 link 标签引入
    extract: true,
  })
]

// 如果不是开发环境，开启代码压缩
isDev || plugins.push(terser())

// packages 文件夹路径
const root = path.resolve(__dirname, 'packages')

module.exports = fs.readdirSync(root)
  // 过滤，只保留文件夹 
  .filter(item => fs.statSync(path.resolve(root, item)).isDirectory())
  // 为每个文件夹创建对应的配置
  .map(item => {
    const pkg = require(path.resolve(root, item, 'package.json'))
    return {
      input: path.resolve(root, item, 'index.js'),
      output: [
        {
          exports: 'auto',
          file: path.resolve(root, item, pkg.main),
          format: 'cjs'
        },
        {
          exports: 'auto',
          file: path.resolve(root, item, pkg.module),
          format: 'es'
        }
      ],
      plugins,
    }
  })

修改工作区中所有包下的package.json，添加下面两行。main作为其他人引用的时候的cjs出口，module是es方式引入时的出口
```
"main": "dist/cjs/index.js",
"module": "dist/es/index.js",
```
运行命令行rollup -c 打包

设置环境变量

使用cross-env插件，可以跨平台设置环境变量。引入插件之后，修改package.json中的命令，使用cross-env来设置环境变量。

"scripts": {
    "build:prod": "cross-env NOOD_ENV=production rollup -c",
    "build:dev": "cross-env NOOD_ENV=development rollup -c",
  }

文件清理

lerna clean 命令能够清除每个包中的node_modules
通过rimraf插件删除文件
1. 安装rimraf插件 yarn add rimraf -D -W
2. 为每个包的package.json添加del命令
```
 "scripts": {
    "del": "rimraf dist"
  },
```
3. 根目录下运行yarn workspaces run del。将为工作区的所有包统一运行命令。