前言
在日常开发过程中，构建组件库是必不可少的一环，此篇文章就是描述如何搭建一个完整的组件库，解决组件库开发发布过程中的如下问题：
1.如何在最少的依赖下快速开发一个vue组件。
2.如何将所有的包放置在一个git仓库内。
3.如何将git仓库内的所有包一键发布。
4.如何管理所有包的依赖，减少包的体积。
5.如何快速创建组件示例。
6.如何打包组件，webpack？
快速原型开发
开发组件和开发项目是不一样的，在开发组件的时候，我们希望能够有一种工具能够快速针对某个vue文件搭建开发环境，并且在发布的时候能够对其进行打包编译，此时我们可以使用@vue/cli-service-global。
- 全局安装
此包必须全局安装：
npm install -g @vue/cli-service-global
- 创建vue文件
在根目录下创建App.vue文件：
<template>
<h1>Hello!</h1>
</template>
- 启动开发服务器
在命令行中执行:
vue serve
入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。你也可以显式地指定入口文件：
vue serve App.vue
- 执行打包
vue build
打包完成后，打包结果会放到dist目录下， 默认情况下，会打包生成一个应用，该应用包含html和资源文件，可以直接部署为静态站点。但是通常情况下，我们需要将组件打包成一个库，以便发布后供项目使用。
打包成库需要指定构建目标:
vue build --target lib
添加构建目标后，执行打包，dist目录中包含各种规范的js文件和一个demo示例html。
目前为止，快速开发vue组件已经完成，我们可以快乐的开发各种组件，但是，当所需开发的组件慢慢变多之后，文件的组织方式成为我们需要考虑的事情。
可以想到有以下三种方式组织文件结构：
1.每一个组件都是一个单独的仓库。
2.一个仓库中包含多个组件vue文件，作为一个包发布。
3.一个仓库中包含多个组件包，每个组件包单独发布。
第一种方式，每一个组件都是一个单独仓库，虽然有利于组件开发，但是组件维护起来比较麻烦。组件越多，需要维护的仓库也就越多，当其中部分组件依赖的如lodash需要升级时，我们需要一个个进行升级，比较麻烦。
第二种方式，将所有的组件作为一个包发布，虽然维护比较方便，但是发布后，别人只想使用其中的一个组件时，会需要把整个组件库引入，如果不提供按需加载，那么会造成项目中引入很多不必要的代码。
第三种方式可参考下文。
monorepo
当我们查看 vue3 源码时，可以看到，仓储结构如下：
packages
├── compiler-core
├──_tests_ #单元测试
├──src #源文件目录
├──package.json
├── compiler-dom
├──_tests_ #单元测试
├──src #源文件目录
├──package.json
package.json
这个就是典型的monorepo ，monorepo是项目代码的一种管理方式，指在一个仓库中管理多个模块/包。
monorepo追求的是在一个仓库中管理多个模块，每个模块有独立的package.json管理各自依赖，同时在项目根目录下可以通过命令安装或升级模块依赖，并提供了一个模块共享的node_modules。
yarn workspace
yarn workspace 是实现monorepo的一种方式。
使用yarn workspace要求在根目录的package.json中添加如下属性：
{
"private": true,
"workspaces": ["packages/*"]
}
private属性指定根目录是私有的，不会被发布工具发布到npm上。
workspace属性指定组件所在文件夹，支持通配符。
修改完package.json之后，按照vue-next的项目结构在packages文件夹下创建input测试组件。
假设，自定义的input组件依赖dayjs包，可以在根目录下执行如下命令安装：
yarn workspace m-input add dayjs
其中m-input并不是packages下组件文件夹的名称，而是组件文件夹下package.json中的name属性值。
安装完成后，dayjs会自动添加到input组件的package.json下，但是包下载到了根目录下的node_modules文件夹中，这样做可以更好的管理多组件包的依赖。如果当前组件依赖的包版本和其他组件依赖的包版本不一样，如其他组件依赖lodash@4，当前组件依赖lodash@3， 此时依赖包会被下载到当前组件文件夹下的node_modules中。
通过yarn workspace可以执行某个组件下的npm scripts，如给input组件添加一个build命令，可以在根目录下通过如下命令执行build：
yarn workspace m-input run build
对于build这种命令，几乎所有组件都需要，那么yarn workspace提供了一个快捷命令，可以一键执行所有组件包的build命令:
yarn workspaces run build
storybook
目前为止，仓库的整体文件结构和组件库的依赖包管理都已经完成了，可以愉快的开发组件了,当组件开发完成后，一般开发人员都会编写相应的使用文档，文档中包含相应的使用示例.
storybook是可视化的组件管理展示平台，支持在隔离的开发环境中，以交互式的方式展示组件，支持vue，react等。
安装使用：
npx -p @storybook/cli sb init --type vue
yarn add vue -W
yarn add vue-loader vue-template-compiler --dev -W
修改配置：
安装完成之后，在根目录的.storybook文件夹下存放着storybook使用的所有配置文件，修改main.js中stories属性，将其指向packages所有组件下的.stories.js文件。
"stories": [
"../packages/**/*.stories.mdx",
"../packages/**/*.stories.@(js|jsx|ts|tsx)"
]
添加组件示例：
在input组件包中添加 Input.stories.js 文件：
import MInput from './index'
export default {
title: 'MInput',
component: MInput
};
export const Text = () => ({
components: { MInput },
template: '<m-input />',
});
export const Password = () => ({
components: { MInput },
template: '<m-input type="password" placeholder="请输入密码"/>',
});
其中默认导出是storybook页面左侧导航栏，每一个具名导出都是一个样例。
最终执行yarn storybook，打开站点：
lerna
lerna 是babel团队开源的用于管理多包仓库的工具，也可以用于实现monorepo。
安装lerna：
npm install lerna -g
初始化lerna:
lerna init
会在项目根目录下添加lerna.json配置文件。
可以使用lerna管理项目依赖：
如果当前form自定义组件依赖input自定义组件，可以使用：
lerna add input --scope=form
还可以使用import命令导入本地包：
lerna import <path-to-external-repository>
通过exec和run执行包里面的相关命令
lerna run --scope my-component test
通过clean命令一键清除所有包的node_modules目录：
lerna clean
learn最主要的功能是一键发布所有包的npm上：
lerna publish
发布包到npm需要登录，可以通过 npm whoami 查看当前登录用户，通过 npm login 进行登录。
单元测试
单元测试是组件化开发中必不可少的部分
安装依赖：
npm i jest @vue/test-utils vue-jest babel-jest -D
1.添加jest配置文件jest.config.js
module.exports = {
"testMatch": ["**/_tests_/**/*.[jt]s?(x)"],
"moduleFileExtensions": [
"js",
"json",
// 告诉 Jest 处理 `*.vue` 文件
"vue"
],
"transform": {
// 用 `vue-jest` 处理 `*.vue` 文件
".*\\.(vue)$": "vue-jest",
// 用 `babel-jest` 处理 js
".*\\.(js)$": "babel-jest"
}
}
1.添加babel配置文件babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env'
]
]
}
1.添加测试命令
"test": "jest"
1.添加测试文件
在组件包的tests文件夹下添加相关js文件，如input包下面添加input.test.js
import input from '../src/index.js'
import { mount } from '@vue/test-utils'
describe('m-input', () => {
test('input-text', () => {
const wrapper = mount(input)
expect(wrapper.html()).toContain('input type="text"')
})
})
1.执行测试命令
yarn test
测试可以在命令行中看到单元测试执行结果：
rollup打包
rollup是一个基于ESM的模块打包工具，和webpack相比，其打包结果更小，因此适合打包框架或者组件库。
安装必须的依赖：
npm i rollup rollup-plugin-terser rollup-plugin-vue@5.1.9 vue-template-compiler -D
需要注意的是安装vue时需要指定版本，否则会安装vue3。
- 单组件打包
1.添加配置文件
在组件中添加rollup.config.js文件，该文件是rollup打包的配置文件，指定起始文件，输出文件位置及格式，插件。
import { terser } from 'rollup-plugin-terser'
import vue from 'rollup-plugin-vue'
module.exports = {
input: 'src/index.js',
output: [
{
file: 'dist/index.js',
format: 'es'
}
],
plugins: [
vue({
css: true,
compileTemplate: true
}),
terser()
]
}
1.添加可执行命令
在package.json文件的scripts属性下添加打包命令:
"build": "rollup -c"
-c指的是使用当前项目目录下的配置文件rollup.config.js
1.执行命令
yarn build
执行完毕之后，可以看到打包结果。
- 多组件打包
虽然可以用上述单组件打包的方式为每一个组件打包，但是这样比较麻烦，可以在项目根目录下通过一个配置文件打包所有组件。
此时需要添加额外依赖：
npm i @rollup/plugin-json rollup-plugin-postcss @rollup/plugin-node-resolve cross-env -D
1.为组件指定入口文件
在每个包下的package.json文件中添加main和module属性：
"main": "dist/cjs/index.js",
"module": "dist/es/index.js",
1.设置环境变量
利用cross-env设置环境变量，区分开发环境和生产环境:
"build:prod": "cross-env NODE_ENV=production rollup -c",
"build:dev": "cross-env NODE_ENV=development rollup -c"
1.添加配置文件
在项目的根目录下添加rollup.config.js文件，该文件会遍历packages文件夹下的所有文件夹并打包:
import fs from 'fs'
import path from 'path'
import json from '@rollup/plugin-json'
import vue from 'rollup-plugin-vue'
import { terser } from 'rollup-plugin-terser'
import postcss from 'rollup-plugin-postcss'
import { nodeResolve } from '@rollup/plugin-node-resolve'
const isDev = process.env.NODE_ENV !== 'production'
// 公共插件配置
const plugins = [
vue({
css: true,
compileTemplate: true
}),
json(),
nodeResolve(),
postcss({
// 把 css 插入到 style 中
// inject: true,
// 把 css 放到和js同一目录
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, 'src/index.js'),
output: [
{
exports: 'auto',
file: path.resolve(root, item, pkg.main),
format: 'cjs'
},
{
exports: 'auto',
file: path.join(root, item, pkg.module),
format: 'es'
},
],
plugins: plugins
}
})
此时执行打包命令，可以一次性为所有组件包打包。
现在有个问题，每次打包的时候需要删除上次打包结果，因此需要添加删除命令:
安装依赖包：
npm i -D rimraf
为每个组件包添加del命令：
"del": "rimraf dist"
在根目录下添加clean命令：
"clean": "yarn workspaces run del"
此时执行yarn clean 就可以清除所有包的dist目录。
plop模版
截止到目前为止，项目的整体结构已经完成，接下来就是无休止的添加组件了，但是考虑到每个组件的初始化有很多相同的工作需要手动完成，此时可以通过plop将这部分工作交给机器。
安装依赖：
npm i plop -D
1.创建模版文件
在项目中添加plop-template/component文件夹，此文件夹下放置创建组件用的所有模版文件。
1.添加plopfile.js
该文件是plop插件执行的入口文件：
module.exports = plop => {
plop.setGenerator('component', {
description: 'create a custom component',
prompts: [
{
type: 'input',
name: 'name',
message: 'component name',
default: 'MyComponent'
}
],
actions: [
{
type: 'add',
path: 'packages/{{name}}/src/{{name}}.vue',
templateFile: 'plop-template/component/src/component.hbs'
}
]
})
}
为plop添加一个可执行的命令，该命令会询问用户组件的名称，然后将模版中所有的文件拷贝到packages相关文件夹内。
1.添加scripts命令
"plop": "plop"
此时在命令行中执行yarn plop component就可以创建组件了。
网友评论