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

前言介绍

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

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

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

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

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

一、创建一个vite项目

1、使用创建命令:

复制代码
pnpm create vite

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

2、选择others

3、 模板选择library

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

4、选择开发语言

开发语言这里选择Typescript.

二、安装依赖

复制代码
pnpm  install

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

三、目录介绍

1、vite.config.ts打包文件

javascript 复制代码
import { defineConfig } from 'vite'

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

2、package.json命令配置文件

javascript 复制代码
{
  "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上而准备的。接下来,开发属于你自己的js库吧

相关推荐
美食制作家26 分钟前
【无标题】Threejs第一个3D场景
javascript·three
HelloRevit2 小时前
React DndKit 实现类似slack 类别、频道拖动调整位置功能
前端·javascript·react.js
ohMyGod_1232 小时前
用React实现一个秒杀倒计时组件
前端·javascript·react.js
艾克马斯奎普特2 小时前
Vue.js 3 渐进式实现之响应式系统——第四节:封装 track 和 trigger 函数
javascript·vue.js
阿帕琪尔2 小时前
😎vite自动打包压缩图片和转webp的插件
vite
JustHappy3 小时前
「我们一起做组件库🌻」虚拟消息队列?message组件有何不同?(VersakitUI开发实录)
前端·javascript·vue.js
Carlos_sam3 小时前
Openlayers:为Overlay创建element的四种方式
前端·javascript·vue.js
纵昂3 小时前
Js中常用数据转换及方法记录汇总
前端·javascript
还是鼠鼠3 小时前
Node.js中间件的5个注意事项
javascript·vscode·中间件·node.js·json·express
海底火旺3 小时前
闭包模块:JavaScript的"魔法收纳盒"
前端·javascript