使用 Vite 打包工具库并使用 GitHub Actions 自动化发布npm流程

使用 Vite 打包一个 TypeScript 编写的 utils 工具库，并在发布到 npm 之前使用 Vitest 进行测试，同时利用 GitHub Actions 自动化发布流程

前言

我们在日常开发中经常会使用 npm install 安装别人的包，使用别人的插件。

当你在前端开发有一段时间之后你也会知道，那些npm包实际上就是别人写好的一些代码来供你调用。

开发久了难免就想自己造轮子了，当然现在轮子这么多，不一定要自己造了，你可以不做，但不能不会。

那么今天就来讲讲如何通过Vite + TypeScript + Vitest + GitHub Actions 自动化发布流程来发布一个属于自己的npm包。

步骤

• 安装必要的依赖
• 创建项目
• 项目配置
• 编写代码
• 单元测试
• 编写 README.md
• 构建和发布命令配置
• 手动发布到 npm
• 自动发布到 npm
• 测试 npm 包

一、安装必要的依赖

• 安装 Vite: npm install vite --save-dev
• 安装 TypeScript: npm install typescript --save-dev
• 安装 vite-plugin-dts 插件以支持 npm install vite-plugin-dts --save-dev
• 安装 Vitest: npm install vitest --save-dev
• 安装 @types/node 以便支持 Node.js 环境下的类型定义: npm install @types/node --save-dev

二、创建项目

使用 Vite 快速创建一个原生 TypeScript 开发的项目非常简单。按照以下步骤进行操作：

• 确保你已经安装了最新版本的 Node.js（建议使用 LTS 版本）。
• 打开终端，并进入你想创建项目的目录。
• 运行以下命令来创建一个新的 Vite 项目：

pnpm create vite utils --template vanilla-ts

这将创建一个名为 utils 的文件夹，并使用 vanilla-ts 模板来初始化一个原生 TypeScript 项目。
--template vanilla-ts 是在使用 Vite 创建项目时的一个选项参数。它指定了所使用的项目模板为 “vanilla-ts”。

• 进入项目目录：

cd utils

• 安装项目的依赖：

pnpm install

• 运行以下命令来启动开发服务器：

pnpm run dev

这将启动 Vite 的开发服务器，并在浏览器中打开项目。

现在，你就可以开始在 src 目录下编写你的原生 TypeScript 代码了。Vite 会自动监听你的代码变化，并实时更新你的应用程序。
你可以根据你的需求修改和扩展项目，例如添加其他依赖、配置构建选项等。
请注意，原生 TypeScript 项目使用 Vite 不需要额外的配置，因为 Vite 默认支持 TypeScript。如果你想更深入地定制项目的配置，可以查阅 Vite 的官方文档或社区资源。

运行后的截图，点击count会++。项目结构和counter.js文件。

三、项目配置

1、Vite 配置

在项目根目录下创建 vite.config.ts 文件 :

import {
    defineConfig } from 'vite';

export default defineConfig({
   
  build: {
   
    lib: {
   
      entry: './src/index.ts', // 工具库入口
      name: 'Utils', // 工具库名称
      fileName: (format) => `index.${
     format}.js`, // 工具库名称
      // formats: ['es', 'umd', 'cjs'], // 打包模式，默认是es和umd
    }
  },
  // outDir: "lib", // 自定义构建输出目录 默认为 dist
});

2、类型声明文件 配置

vite-plugin-dts 是一个 Vite 插件，用于自动生成 TypeScript 类型声明文件（.d.ts）。

在使用 Vite 构建 TypeScript 项目时，通常需要手动编写类型声明文件来描述项目中的模块、组件和函数的类型。这个过程可能会比较繁琐和容易出错。vite-plugin-dts 的目的就是简化这个过程，它会基于项目中的源代码自动生成类型声明文件，减少手动编写的工作量。

然后，在 Vite 的配置文件 vite.config.js 中将插件引入：

import {
    defineConfig } from 'vite';
import dts from 'vite-plugin-dts'

export default defineConfig({
   
  plugins: [dts()], // 启用插件 vite-plugin-dts
  //...
});

当你启动 Vite 构建项目时，vite-plugin-dts 将会自动扫描你的源代码并生成对应的类型声明文件。这些文件将会保存在 dist 目录下的 types 文件夹中。

vite-plugin-dts 还提供了一些配置选项，可以根据你的需要进行自定义。例如，你可以指定生成类型声明文件的输出路径、忽略某些文件或文件夹、自定义类型声明的文件名等。

运行 npm run build 命令的时候 dist 文件夹中就会自动生成 index.d.ts 文件，发布之后别人下载使用时就会有类型提示了。

3、Vitest 配置

• 在 package.json 中添加测试脚本:

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

4、package.json 配置

package.json 文件里面有很多字段要填写，否则不能正确发布。最重要的是以下几个字段：

• name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
• version: 版本号，不能和历史版本号相同，每次发布都要增大才能发布成功。
• files: 需要上传的文件，一般是 dist 目录下的文件，也可根据需要配置需要发布的文件。
• main: commonJs的包路径,入口文件，默认为 index.js，这里改为 dist/index.umd.js。
• module: ESModule的包路径,模块入口，这里改为 dist/index.es.js。
• types: ts类型文件路径,类型声明文件入口，这里改为 dist/index.d.ts。
• private: 是否为私有包， 需要更改为 false 才能发布到 npm。
• type: 文件的默认加载方式，若不填则默认为commonJs。但是无论package.json