vite发布纯函数工具库(ts+vitest单元测试)

新建项目

1. pnpm create vite ；
2. Project name: strayer-tool; // strayer-tool换成你自己的函数库名称
3. Select a framework: Vue;
4. Select a variant: TypeScript; // 如果你的函数库只是js, 那这里就选javaScript
5. 项目创建完成

因为我们是纯函数工具库，所以需要把vue相关的依赖都删掉

1. package.json 中删除vue相关依赖

1. 不相关的目录删掉

3.新增tool目录，该目录下增加index.ts文件。然后把tsconfig.json里的include改为tool的目录

4.tool/index.ts文件随便写点函数导出测试

/**
 * @description: 求和函数
 * @param {*}
 * @return {*}
 */
function stSum(a: number, b: number) {
  return a + b;
}
export {
  stSum
}

package.json

1. package.json 文件里面有很多字段要填写，否则不能正确发布。最重要的是以下几个
   • name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
   • version: 版本号，不能和历史版本号相同。
   • files: 配置需要发布的文件。
   • main: 入口文件，默认为 index.js，这里改为 dist/vue3-xmw-table.umd.js。
   • module: 模块入口，这里改为 dist/vue3-xmw-table.es.js。
2. 完整的 package.json 如下：

{
  "name": "strayer-tool",
  "private": false,
  "version": "0.0.0",
  "type": "module",
  "main": "dist/strayer-tool.umd.js",
  "module": "dist/strayer-tool.es.js",
  "files": ["dist/*"],
  "scripts": {
    "build": "vite build"
  },
  "dependencies": {
  },
  "devDependencies": {
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

vite.config.ts

import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [],
  build: {
    lib: {
      entry: 'tool/index.ts', // 工具库入口
      name: 'strayer-tool', // 工具库名称
      fileName: (format) => `strayer-tool.${format}.js`, // 工具库名称
    },
  },
})

配置完成

• pnpm install 安装相关依赖
• pnpm build 打包测试 打包成功：

发布npm

1. 先查看 npm 的 registry; npm config get registry ; 如果显示的不是官方源，就要改回来

   设置 npm 的 registry 为官方源 npm config set registry https://registry.npmjs.org

2. 登录npm npm login
3. 发布到npm npm publish

   注：上传的npm包，在72小时后不可删除，如果是测试用的包，记得72小时内删除

4. 在npm官网中登录自己的账号查看是否发布成功

用一个demo项目测试引入npm上我们发布的包看能否正常引用

npm install trayer-tool

• 可以看到，我们发布的工具函数库可以正常使用
• 到这里一个工具函数库发布已经算完成了。但为了让我们的函数工具库更完美，接下来我们加入ts类型声明文件自动生成和单元测试

注：对于一个工具函数来说，单元测试非常非常非常重要。不会单元测试的可以看一下《JavaScript测试驱动开发》这本书

ts类型声明文件自动生成

使用 vite-plugin-dts会自动把包导出的方法和对象对应的ts类型生成 .d.ts类型声明文件

1. 安装

pnpm i vite-plugin-dts -D

2.使用

• 在 vite.config.ts:

import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [dts()], // 重点是这一行写了就行
  build: {
    lib: {
      entry: 'tool/index.ts', // 工具库入口
      name: 'strayer-tool', // 工具库名称
      fileName: (format) => `strayer-tool.${format}.js`, // 工具库名称
    },
  },
})

• 在package.json中,把types字段指向自动生成的dist目录下得index.d.ts

{
  "name": "strayer-tool",
  "private": false,
  "version": "0.0.1",
  "type": "module",
  "main": "dist/strayer-tool.umd.js",
  "module": "dist/strayer-tool.es.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist/*"
  ],
  "scripts": {
    "build": "vite build"
  },
  "devDependencies": {
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-dts": "^3.3.1"
  }
}

• 跑 npm run build 的时候dist中就会自动生成 index.d.ts文件

• 发布之后别人下载使用时就会有类型提示了

注：每次要发布的时候，package.son里面的version字段都要增大才能发布成功

单元测试

这里我们使用vitest测试框架。（别问为什么选择这个，之前用过jest。感觉项目大了跑起来有点慢。这次正好换个新的试试）

1. 安装vitest依赖：pnpm add -D vitest
2. 在package.json中增加测试脚本

3.（在vscode编辑器中搜索vitest插件安装。可以有更完美的配合） 4. 在tool目录下建一个index.test.ts文件，里面放index.ts的测试内容

import { describe, expect, it } from 'vitest'
import { stSum } from '.'
describe('对stSum求和函数进行测试', () => {
  it('should return 3 with 1+2', () => {
    expect(stSum(1, 2)).toBe(3)
  })
  it('should return 0 with 0+0', () => {
    expect(stSum(0, 0)).toBe(0)
  })
  it('should return null with 2+null', () => {
    expect(stSum(2, null as any)).toBe(null)
  })
})

1. 跑测试命令： pnpm test 结果：

可以看到，前面两个测试断言通过了。但后两个断言没有通过。说明我们写的求和函数不符合我们期待的用法，根据断言结果返回去修改求和函数

6.修改tool/index.ts里面的stSum求和函数

/**
 * @description: 求和函数
 * @param {*}
 * @return {*}
 */
function stSum(a: number, b: number) {
  console.log('typeof a:',typeof a)
  console.log('typeof b:',typeof b)
  if(typeof a !== 'number') return a;
  if(typeof b !== 'number') return b;
  return a + b;
}
export {
  stSum
}

1. 再跑测试命令： pnpm test 结果：

可以再看，修改后的求和函数测试全部通过，符合我们的预期用法

好了，简单的一个工具函数库就弄好了。