【从零开始集成低代码平台】利用vite搭建一个函数库

开源地址：https://github.com/zmkwjx/baikbingo-cat.git

摘要

上一章“应用消息订阅发布架构”我们通过 npm 进行开源发布了安装包，那么这个过程是怎样实现的呢？在实际生产开发中，我们会接触多个项目，在通常情况下，函数库一般是通用的可复制，所以很多人选择CV来达到目的。但是这样做导致每次函数出现问题都要一个一个项目进行更改，况且每次组件新项目，不同的人都有不同的风格，导致使用上千变万化，不利于代码维护。我们该如何去制造属于自己的函数库？如何去做规范、发布呢？

介绍

本项目在思维导图上已经体现过，主要是使用 vite3+vue3 进行开发，所以组件库也是采用这个模式。具体使用到的插件有：vite3、vue3、Vitest、typescript，基本上都是官方推荐的那种。组件库没有用你想象的复杂，本质上就是一个函数集合体，聚合了多种、多个类别的常用函数，本篇文章也只是带你入门，让你看清整个组件库从开始、编码、测试、发布的整个过程。

开始

初始化项目

yarn create vite my-vue-app --template vue
cd my-vue-app
yarn
yarn dev

新建packages文件夹，并按照如图结构新建文件

my-vue-app
├─packages
│  ├─__test__
│  │  └─basic.test.ts
│  └─basic
│      └─index.ts
├─public
└─src

设置路径别名alias

打开vite.config.ts，添加alias说明，如下

resolve: {
  alias: {
    '@packages': path.resolve(__dirname, "packages")
  }
}

在tsconfig.json下添加路径说明

"compilerOptions": {
  "paths": {
    "@packages/*": ["./packages/*"]
  }
}

TDD驱动，先搞一个单元测试

Vitest 是一个由 Vite 提供支持的极速单元测试框架，我们使用并安装它。

yarn add -D vitest

在安装了 Vitest 的项目中，你可以在 npm 脚本中使用 vitest 脚本，或者直接使用 npx vitest 运行它。 以下是脚手架 Vitest 项目中的默认 npm 脚本：

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

我们先在 packages/__test__/basic.test.ts中写入预期要实现功能的测试单元

import { expect, test } from 'vitest'
import { sum } from '@packages/basic'

test('1 + 1 = 2', () => {
  expect(sum(1, 1)).toBe(2)
})

再去 packages/basic/index.ts 实现具体功能

export const sum = (num1: number, num2: number): number => {
  return 1 + 1
}

执行 yarn test 可以看到测试结果、执行 yarn coverage 可以看到代码覆盖率
vscode 可以安装 Vitest 插件，方便执行单元测试

手动调试预览

我们在开发函数库时，可以在 App.vue 中引用当前项目的函数进行预览

<template>
  <div>
    <input v-model="value1" />
    <input v-model="value1" />
    <button @click="handleSum">求和</button>
    <h1>结果：{{ result }}</h1>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { sum } from '@packages/basic'

const value1 = ref<number>(1)
const value2 = ref<number>(1)
const result = ref<number>(handleSum())

const handleSum = () => {
  return sum(value1.value, value2.value)
}
</script>

执行 yarn dev 即可以在网页上手动调试函数

编译&环境变量

其实这部分在vite官网的库模式中已经有明确的解决方案了，但是我们需要同时支持预览和编译两部分，就需要区分两种不同的情况下去解决。当我们执行 yarn dev 需要 public 里的公共资源以及编译 vue 部分；但是执行 yarn build 时，我们不需要资源以及 vue 和 html 则需要另外配置。

首先我们需要在根目录新建一个定义环境变量的文件 env.d.ts：

interface ImportMetaEnv {
  VITE_NODE_ENV: string;
}
export default ImportMetaEnv;

再建一个环境文件 .env.npm:

VITE_NODE_ENV=npm

编辑 vite.config.ts，如下：

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default ({ mode }) => {
  // 是否构建库版本
  let build = {}
  const isNpm = loadEnv(mode, process.cwd()).VITE_NODE_ENV === "npm"
  if (isNpm) {
    build = {
      outDir: 'lib',
      sourcemap: true,
      lib: {
        entry: path.resolve(__dirname, 'packages/basic/index.ts'),
        name: 'basic',
        fileName: format => `basic.${format === 'iife' ? 'min' : format}.js`,
        formats: ['es', 'umd', 'iife']
      },
      rollupOptions: {
        external: ['vue', 'svg']
      }
    }
  }
  return defineConfig({
    publicDir: isNpm ? false : 'public',
    plugins: [vue()],
    resolve: {
      alias: {
        '@packages': path.resolve(__dirname, "packages")
      }
    },
    build
  })
}

在 package.json 里的 scripts 加入一条指令

"build-npm": "vue-tsc --noEmit && vite build --mode npm"

发布到NPM

我们得在 package.json 文件中设置我们编译好的文件的地址、包指向、以及发布指令等，如下：

{
  "name": "basic",
  "private": false,
  "version": "1.0.0",
  "files": [
    "lib"
  ],
  "main": "./lib/basic.umd.js",
  "module": "./lib/basic.es.js",
  "unpkg": "./lib/basic.min.js",
  "exports": {
    ".": {
      "import": "./lib/basic.es.js",
      "require": "./lib/basic.umd.js"
    }
  },
  "scripts": {
    "dev": "vite",
    "test": "vitest",
    "coverage": "vitest run --coverage",
    "build": "vue-tsc --noEmit && vite build",
    "build-npm": "vue-tsc --noEmit && vite build --mode npm",
    "publish-main": "npm run build-npm && npm publish --access public",
    "publish-beta": "npm run publish-main --tag beta",
    "preview": "vite preview"
  }
}

设置完后可以看到我们有两种发布模式 publish-main 和 publish-beta，在我们无法确定该函数库是否稳定，或者想要实验性的发布测试那么执行 yarn publish-beta。在上个测试版本稳定后，我们只需要执行 yarn publish-main 便可发布新版本，一定要记得更改 version 版本号。

备注

在发布的过程中我们需要在 shell 先登入至 npm 平台才可以成果发布

npm login

接下来你也可以尝试搞一个自己的组件库了！