添加组件_大前端进阶-如何构建组件库

绝地灬酷狼 2023-01-07 08:57 104阅读 0赞

![fd26d947e639037562d7ab87c3a29bcf.png][]

在日常开发过程中，构建组件库是必不可少的一环，此篇文章就是描述如何搭建一个完整的组件库，解决组件库开发发布过程中的如下问题：

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，打开站点：

![c55a14ee76b1d85186803d397990752e.png][]

## **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

测试可以在命令行中看到单元测试执行结果：

![cfa7da3c06da33038e19a6d55a0ccd12.png][]

## **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就可以创建组件了。

![7fc507ccb47ee886885b85d9cd8be16f.png][]

[fd26d947e639037562d7ab87c3a29bcf.png]: /images/20221119/34b90242d644480ab71a8bff77e8b583.png
[c55a14ee76b1d85186803d397990752e.png]: /images/20221119/10afdea3e33a46f8977349177ebfcc36.png
[cfa7da3c06da33038e19a6d55a0ccd12.png]: /images/20221119/dae767c301b54a8dbc71961f65ba00ef.png
[7fc507ccb47ee886885b85d9cd8be16f.png]: /images/20221119/5ef0c0e5de7144879d7aa59e0881274c.png