如何使用vite框架封装一个js库，并发布npm包

目录

前言介绍

一、创建一个 vite 项目

1、使用创建命令：

 2、选择 others

3、模板选择 library

4、选择开发语言

​编辑 二、安装依赖

三、目录介绍

1、vite.config.ts 打包文件

2、package.json 命令配置文件

三、发布 npm

1、注册 npm 账号

2、设置 npm 源

3、登录到 npm

4、推送到 npm 仓库

5、查看 npm 包

---

前言介绍

最近，公司项目上需要把很多公用函数封装起来，作为一个公共的库使用。以前的做法是使用 webpack 或者 Rollup。Rollup 和 Webpack 都是常用的 JavaScript 模块打包工具，用于构建现代化的 Web 应用程序。但是，不管是 webpack 或者 Rollup 配置起来都很复杂，使用起来不是顺手。

经过一番折腾，发现 vite 也可以。大多数同学可能使用 vite 作为脚手架去构建 vue、react 开发应用。其实，vite 也可以作为 JavaScript 模块打包工具，构建一个 JavaScript 库，并且使用起来容易上手，配置也简单，打包速度很快，并发布到 npm 上。

Vite 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 是一种具有明确建议的工具，具备合理的默认设置。您可以在 功能指南 中了解 Vite 的各种可能性。通过 插件，Vite 支持与其他框架或工具的集成。如有需要，您可以通过 配置部分 自定义适应你的项目。

Vite 还提供了强大的扩展性，可通过其 插件 API 和 JavaScript API 进行扩展，并提供完整的类型支持。其他的关于 vite 的介绍欢迎同学上官网去学习。下面咱们直接上手。

一、创建一个 vite 项目

1、使用创建命令：

pnpm create vite

这里不要选择开发框架而是选择 Others。 如下图所示：

 2、选择 others

3、模板选择 library

这 library 的意思是软件库，正好我们开发的就是一个软件库。

4、选择开发语言

 开发语言这里选择 Typescript.

 二、安装依赖

pnpm  install

 依赖安装完毕后，一个 js 库开发环境就搭建起来了。

三、目录介绍

1、vite.config.ts 打包文件

import {defineConfig} from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: './lib/main.ts',
      name: 'Counter',
      fileName: 'counter'
    }
  }
})

2、package.json 命令配置文件

{
  "name": "vite-roll",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "files": [
    "dist",
    "index.d.ts"
  ],
  "main": "./dist/counter.umd.cjs",
  "module": "./dist/counter.js",
  "types": "./index.d.ts",
  "exports": {
    "types": "./index.d.ts",
    "import": "./dist/counter.js",
    "require": "./dist/counter.umd.cjs"
  },
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build"
  },
  "devDependencies": {
    "typescript": "^5.3.3",
    "vite": "^5.0.10"
  }
}

从以上两个文件中可以看出，vite 简直就是为了开发一个 js 库，并且发布到 npm 上而准备的。

三、发布 npm

1、注册 npm 账号

想要发布到 npm 仓库，就必须要有一个账号，先去 npm 官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。

2、设置 npm 源

在国内很多小伙伴喜欢把本地的 npm 镜像源采用的是淘宝镜像源或者其它的，如果想要发布 npm 包，我们得吧我们得 npm 源切换为官方得源，命令如下：

npm config set registry=https://registry.npmjs.org

3、登录到 npm

在打包后的文件根目录打开终端，输入 npm login 登录到官网

完成如下图步骤就成功登陆了

4、推送到 npm 仓库

输入 npm publish 就可以正式发布到 npm 仓库了

注意：发布前要保证没有相同的包名，否则无法发布，每次发布的版本号必须不同

5、查看 npm 包

上传成功后可以在 npm 官网上通过自己设置的 keywords 关键字查到自己上传的组件

发布成功后就可以使用 npm 命令行下载使用了。

最后附上发布 npm 安装包，package.json 文件完整配置：

{
  "name": "array-device",
  "version": "1.1.2",
  "description": "Handle your array objects with ease",
  "type": "module",
  "files": [
    "dist",
    "index.d.ts"
  ],
  "main": "./dist/array-device.umd.js",
  "module": "./dist/array-device.es.js",
  "types": "./index.d.ts",
  "exports": {
    "types": "./index.d.ts",
    "import": "./dist/array-device.es.js",
    "require": "./dist/array-device.umd.js"
  },
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build"
  },
  "keywords": [
    "array",
    "reduce",
    "intersection",
    "select"
  ],
  "author": "patton",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "https://github.com/renleiabc/array-device.git"
  },
  "bugs": {"url": "https://github.com/renleiabc/array-device/issues"},
  "devDependencies": {
    "@types/node": "^20.10.8",
    "@typescript-eslint/parser": "^6.18.1",
    "@vitejs/plugin-vue": "^5.0.3",
    "eslint": "^8.56.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-vue": "^9.20.0",
    "prettier": "^3.1.1",
    "typescript": "^5.3.3",
    "vite": "^5.0.10",
    "vue": "^3.4.8",
    "vue-tsc": "^1.8.27"
  }
}

接下来，开发属于你自己的 js 库吧