npm常用库合集

title: npm常用库合集 id: 6db44abb61871667a38575788fa50859 tags:

• npm

• 前端开发

• node

• 工具 date: 2000/01/01 00:00:00 updated: 2024/12/27 11:37:54 isPublic: true --#|[分隔]|#--

npm常用库合集

编译工具

webpack

官网\文档：https://webpack.docschina.org/

前端最流行的编译工具之一，本身就有很多配套的工具，又可以兼容使用很多其他工具，功能齐全。

但它升级到成版本5后，默认去除了node的api，用起来有时不太方便。

安装指令：

生态过于复杂，下面安装的只是基础最核心的。

npm install -D webpack webpack-cli

vite

官网\文档：https://vitejs.cn/

前端新晋的最流行的编译工具之一，因为需要浏览器支持 ES 模块，所以对老旧浏览器有兼容性问题。

安装指令：

输入指令回车后，可按照提示进一步选择要使用的框架、初始工具等。

npm create vite@latest

parcel

官网\文档：https://parceljs.org/

号称零配置构建工具，支持多种语言框架和功能。

安装指令：

以库的形式存在，安装后可以在 package.json 中添加一个使用 parcel 编译 html 的指令来使用。

npm install --save-dev parcel

umi

官网\文档：https://umijs.org/

一个 React 的开发框架，自带框架、编译功能，一般时候没有必要使用。

安装指令：

先创建文件夹，再在空文件夹中执行初始化指令。

mkdir myapp && cd myapp

npx create-umi@latest

babel

Babel文档：https://babeljs.io/docs/en/。

功能强大的 js 转译工具，可以把使用各种新语法的 js 代码，转译成其他平台(低版本的浏览器、低版本的node)可使用的代码，一些平台不支持的语法、原生功能，也可以提供垫片来兼容。

很少被单独使用，经常被嵌套在其他编译工具中使用，比如 webpack、vite等。

开发框架\工具

react

官网\文档：https://zh-hans.reactjs.org/

用于构建用户界面的 JavaScript 库，全球最流行的前端开发框架之一。

安装指令：

只这么安装是很难用的，正常开发是需要使用编译工具配套使用。

npm install -s react

vue

官网\文档：https://cn.vuejs.org/

渐进式 JavaScript 框架易学易用，性能出色，适用场景丰富的 Web 前端框架。

安装指令：

只这么安装是很难用的，正常开发是需要使用编译工具配套使用。

npm install -s vue

express

node开发的常用工具。

koa

node开发的一个开发框架。

Electron

一个框架，使用它开发的产品，可以编译为 Windows、MacOs、Linux 的软件。

前端界面使用web任选，后端使用 nodejs，所以整体来说对前端开发人员很友好。

但最大的缺点，就是编译出软件后，体积巨大，基本就是开发者开发的代码+140M左右的框架体积。

Tauri

对标 Electron，基于Rust语言。

优点是体积小、提供页面可用的系统api、打包后体积小，基本就是开发者开发的代码+3M左右的框架体积。

缺点是页面兼容性问题、深度开发系统小工具需要学习Rust语言、暂不支持交叉编译(只能打包当前系统使用的软件包)。

脚手架

create-react-app

上面说 react 直接使用很难用，需要安装配套的其他工具和对应的编译工具，这个就是官方提供的 react 脚手架。

安装指令：

回车后会要求再一步步选择使用的具体配套工具。

npx create-react-app my-app

vue cli

和 create-react-app 类似，vue cli 是 vue 提供的官方脚手架。

安装指令：

这只是再全局安装这个脚手架生成工具，下一步会需要使用这个工具创建项目。

npm install -g @vue/cli

运行以下命令来创建一个新项目（会创建vue@3版本的项目）：

vue create hello-world

创建 veu@2 版本的项目，需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init

# 生成版本2的项目
vue init webpack my-project

vite

这里也有它，因为它支持的比较多，使用指令和安装指令是一个：

输入指令回车后，可按照提示进一步选择要使用的框架、初始工具等。

npm create vite@latest

UI库

antd

官网\文档：https://ant.design/index-cn

专门为 React 开发的UI框架，也有vue版本的。

安装指令：

@ant-design/icons 是 antd 配套的图标库，如果开发着想主动使用 antd 的图标，就需要安装这个库。

其实只安装 antd 时，这个库也会被安装，因为 antd 自己也需要使用，所以 @ant-design/icons 也会被安装到 node_modules 中，只是没有被显式的写在 package.json 中。

因为 @ant-design/icons 存在于 node_modules 中，所以项目中其实也可以使用，但最好，但是显式的手动安装一下，表明项目中的开发人员手动的使用了这些图标。

npm i -S antd @ant-design/icons

element-ui

官网\文档：https://element.eleme.io/#/zh-CN

专门为 Vue@1 和 Vue@2 开发的UI框架。

安装指令：

npm i -s element-ui

element-plus

官网\文档：https://element-plus.org/zh-CN/#/zh-CN

专门为 Vue@3 的组合式API开发的UI框架。

安装指令：

npm install element-plus --save

tailwindcss

官网\文档：https://tailwindcss.com/

一个类名就是一个style属性，再也不用为起类名而烦恼了，而且，element-plus 官网文档中的代码demo中，也是使用了 tailwindcss。

npm 替代品相关

npm

这个不用说了，安装 node 自带的包管理工具。

cnpm

和npm的主要区别，是使用 install 指令下载依赖时，npm 默认使用的是国外源，而 cnpm 使用的是国内淘宝源。

安装指令：

# 可以直接安装
npm install cnpm -g

# 但 npm 默认使用的是国外源，可能会下载慢，嫌弃下载慢也是要使用 cnpm 的原因
# 可以在安装时指定本次 install 时使用的源地址，这里指定为淘宝源
npm install cnpm -g --registry=https://registry.npmmirror.com

yarn

npm 的替代品，对 node_modules 中的依赖包的管理方式和 npm 有一些区别。

安装指令：

npm install -g yarn

pnpm

npm 的替代品，这个工具对 node_modules 的改造比较大。

npm、cnpm、yarn之类的，在某个项目安装依赖时，都是把下载的依赖放在本项目的 node_modules 下。

但 pnpm 改造比较大，不管哪个项目，在安装依赖时，都会把依赖放在系统中的某个文件夹中。

如果存在相同依赖只是版本不同，则 pnpm 会额外存储此依赖的不同版本中的不同文件。

最后，在要使用这个依赖的项目的 node_modules 文件夹中，创建这个依赖的硬链接文件，这样就能保证即使是使用 pnpm 安装的依赖，但使用 npm、cnpm、yarn 等都可以启动项目，不受影响。

主要的好处就是，不同项目中的相同依赖，不需要在重复下载，节省掉下载的时间。

安装指令：

npm install -g pnpm

nrm

用来管理 npm 使用的下载源的工具。

安装指令：

npm install -g nrm

node 进程管理工具

nodemon

主要用户 node 开发时，不用每改动一次文件就需要重新启动项目的痛点。

pm2

node 的进程管理工具，主要 node 项目的生产环境，因为正常启动 node 项目是终端用 node 执行入口文件。

执行后，终端不能关，否则 node 服务也会停止。

pm2 就能解决这个问题，使用 pm2 启动 node 服务后，node 服务相当于托管给了 pm2，不需要依赖终端。

npm install -g pm2

图表展示

echarts

百度的图表库

highcharts

国外流行的一个图表库

tradingview

展示股票、经济的价格走势无法绕开的强大图表工具。

其他

nvm

node 版本的管理工具，当本地的不同项目需要使用不同版本的 node 时，可以使用这个工具方便的切换。

需要先卸载全局的 node，安装这个工具后，使用这个工具来 install 不同版本的 node，并方便的切换。

react-hooks-global-state

react 的轻量级全局存储库，比 redux 更轻量，大部分中小型项目使用这个就足够了。

zustand

react 的轻量级全局存储库，比 redux 更轻量，比react-hooks-global-state更流行，大部分中小型项目使用这个就足够了。

react-app-rewired

使用 create-react-app 创建的 react 项目，无法进行编译配置，比如创建别名 @ 等等。

此时安装这个依赖，创建一个 config-overrides.js 文件，再把 package.json 文件中的项目启动指令改为使用 react-app-rewired 启动。

那么项目启动时，就会读取 config-overrides.js 文件中的配置，就可以进行编译配置了。

axios

前端最常用的接口工具。

jQuery

前端工程化时代之前，最常用的前端开发工具。

await-to-js

异步辅助库，可以取代烦人的 try-catch 的写法，下面附上它得源码，不想引入库的也可以直接复制源码使用，基本用法见下：

import to from 'await-to-js'

// 定义一个异步方法，这个异步方法可能会抛出错误
async function loadSome(): Promise<any> {}

async function asyncFunctionWithThrow() {
  const promise = awaitLoadSome()
  // 一个异步 Promise，使用 to 包装
  const [err, data] = await to(promise)
  if (err) {
    // 如果err不为null，说明上面的promise抛出异常走了 catch，这个err就是抛出的错误对象
    console.log(err.message)
  } else {
    // err 为null正常拿到了返回值
    console.log('加载成功：', data)
  }
}

下面这是它的源码：

/**
 * @param { Promise } promise
 * @param { Object= } errorExt - Additional Information you can pass to the err object
 * @return { Promise }
 */
function to(promise, errorExt) {
    return promise
        .then(function (data) { return [null, data]; })
        .catch(function (err) {
        if (errorExt) {
            Object.assign(err, errorExt);
        }
        return [err, undefined];
    });
}

export { to };
export default to;

clipboard、clipboard-polyfill

两个工具都是复制插件、copy插件，推荐第一个，更轻量。

clipboard-polyfill的用法，我这个网站中有对应一篇文章讲解使用：复制插件。

但 clipboard-polyfill 的 npm页面 有说明：从2020年起，您可以在 所有主要浏览器的稳定版本 中使用 navigator.clipboard.writeText(...) 来复制文本到见剪切板。

但按照上面的说明来实际使用，好像，不太灵，还是得用插件。

vue-clipboard3

vue专用的复制插件、copy插件

vue-toast-notification

vue的toast提示插件，用法简单，只是可定制项比较少。

crypto-js

加密标准的JavaScript库，提供各类加密解密工具。

lodash

提供各种实用工具 js，非常强大和常用。

opensea-js

github 仓库地址：https://github.com/ProjectOpenSea/opensea-js。

文档地址：https://docs.opensea.io/reference/api-overview。

这是面向 OpenSea (最大的nft市场)的 JavaScript SDK。

这个仓库挺有坑的，安装这个工具时，这个工具会依赖其他工具库，而其他一些工具库的下载地址是 github 地址，经常会下载失败。。。虽然本地访问 github 网站、克隆 github 项目都没有问题，但下载依赖时就是会下载失败，很头大，需要让终端给代理，需要特殊的软件。

qrcodejs2、qrcode-react

文本转二维码图片的工具。

i18n、vue-i18n

让页面支持多语言、国际化的常用工具，其实还是需要自己定义各个语言的页面内容json文件(语言包)，切换语言时，这个工具能方便的使用不同的语言包。

sockjs-client、stompjs

前端使用 WebSocket 的工具。

import SockJS from 'sockjs-client'
import Stomp from 'stompjs'

let socket = new SockJS(CONFIG.SOCKET_URL)
const client = Stomp.over(socket)

socket.io-client、ws、nodejs-websocket

socket 工具。

html2canvas

页面 dom 转 canvas 图片的工具，方便为页面部分区域提供 导出为图片 的功能。

vidage

把视频作为页面某区域背景的工具。

search-params

读取、转译 url 的 search 部分的参数功能。

qiniu

七牛云的 SDK。

three、dat.gui

大名鼎鼎的 three.js，前端页面的3D功能库，可以方便的制作 3D 功能，也可以展示 3D 模型等。

dat.gui 是 three 配套的一个模型参数控制工具。

lrz

前端使用的图片压缩工具，但这个工具已经不再维护了。

可以仍然使用这个，也可以搜索使用其他的前端图片压缩工具。

react-grid-layout、vue-grid-layout

前端网格布局系统，生成多个盒子，每个盒子中内容完全自定义。

用户可以对任意一个盒子进行拖拽位置、修改尺寸等等。

进行操作时，其他盒子也会自动响应式的调整自身位置，很好用。

swiper

官网：https://www.swiper.com.cn/。

一个前端滚动滑动、轮播图工具，轮播功能非常强大，当遇到复杂的轮播功能需求时可以使用。

vconsole

用于开发阶段，使用后页面会有一个悬浮按钮，点击后打开一个此插件生成的控制台。

多用于移动端页面开发，因为pc端开发可以方便的打开控制台，查看元素、网络请求等，而开发移动端页面时不行。

当遇到某个问题只移动端才出现时，就需要使用这个工具查看控制台了。

sortablejs

npm：https://www.npmjs.com/package/sortablejs

demo：http://sortablejs.github.io/Sortable/。

用于可重新排序拖放列表的JavaScript库。

主要就是拖拽功能。

decimal.js、mathjs

用于数学计算的插件，因为 js 进行小数计算时，经常会失去精度，所以引入第三方数学计算插件，开发时会很方便。

decimal.js的npm：https://www.npmjs.com/package/decimal.js。

mathjs的npm：https://www.npmjs.com/package/mathjs。

js-cookie

前端方便的控制 cookie 的工具。

react-cookie

react-hook 可以更方便的使用的cookie管理工具。

ali-oss

阿里云 OSS 对象存储的 SDK。

md5

生成、计算 md5 的工具

nanoid

一个小巧、安全、URL友好、唯一的 JavaScript 字符串ID生成器，类似uuid，但更小巧。

自说明：https://github.com/ai/nanoid/blob/HEAD/README.zh-CN.md

uuid

用于创建随机的通用唯一标识符（UUID）。

cross-env

在package.json中，可以进行跨平台的环境变量的配置。

在使用构建指令时比如 build 时，需要配置 NODE_ENV=production，但如果直接写在 package.json 的 scripts 脚本中，在不同平台执行脚本时可能会因为不支持而报错。

cross-env 就可以解决这个问题。

dotenv

进行开发时，一些编译器会支持开发者在项目根目录创建 .env、.env.pro、.env.dev 文件，然后执行指令时指定环境变量，编译时就会使用对应的 env 文件。

但部分编译器并不支持，我们可以使用这个工具来自行支持。

classnames

用于 React 开发时，指定 dom 的 className 时，方便的设定多个类名，设定的同时可进行各种判断。

web3、ethers

web3 时代的方便的工具库，可以理解为 web2 时代的jquery。

web3文档：https://web3js.readthedocs.io/。

ethers文档：https://docs.ethers.org/v5/。

ethers文档(中文)：https://learnblockchain.cn/ethers_v5/。

@rainbow-me/rainbowkit

使用web3技术的页面连接各种钱包的库，基于react。

truffle

官方文档：https://trufflesuite.com/docs/truffle/how-to/install/。

web3时代的区块链，这个工具是用来部署智能合约到区块链上面的。

file-saver

浏览器中把二进制保存成文件给用户下载，支持多种文件格式，图片、文本、excel等等。

如果导出 excel，可能还配合 xlsx-style、xlsx 等插件使用。

htmlparser2

官网：https://github.com/fb55/htmlparser2

node解析html，使用字符串状态机解析 html 的文本，并且保留出方法，能参与到解析的过程中。

cheerio

官网：https://github.com/cheeriojs/cheerio

node解析html，按照 jquery 的 API 设计的功能。

node-html-parser

官网：https://github.com/taoqf/node-html-parser

node解析html，后起之秀吧，github 中的 api 简单方便看。

nzh

Nzh 适用于需要转换阿拉伯数字与中文数字的场景，比如 101、一百零一、壹佰零壹 三者的互转。

gsap

官网：https://greensock.com/

强大的js动画库，兼容canvas、svg、three.js、WebGl等。

js-base64

支持前端和node的base64编码解码转码处理。

smoothscroll

经常有业务需要点击后滚动页面到某个模块，但好用的 Element.scrollIntoView() 方法，safari 却不支持。

所以找到了 smoothscroll 这个库，很好用。

FullCalendar

npm：https://www.npmjs.com/package/fullcalendar

官方demo：https://fullcalendar.io/demos

据说是最强的前端日历组件。

react-modal

纯粹的基于react的弹框插件，支持方便的二次封装。

• 支持nextjs。

• 支持typescript，需要手动安装 @types/react-modal。

react-hot-toast

基于react的toast消息提示库。

react-toastify

另一个基于react的toast消息提示库。

tiptap

无头的富文本编辑器，也就是只提供api但不提供样式，实际很好用，虽然所有样式需要自己写。

react-otp-input

前端输入验证码时，一个框一个字符的组件。

mitt

一个事件管理库，进行全局事件监听、事件出发的总线工具。

Mitt是为浏览器设计的，但可以在任何JavaScript运行时中工作。它没有依赖项，支持IE9+。

vue3-marquee

vue3的走马灯插件，是真的走马灯，不是轮播图，这个比较适合用于滚动消息通知之类的。

embla-carousel-vue

轮播图插件，相对swiper来说小巧很多，支持react、vue3等等，embla-carousel-vue是vue版本的。

embla-carousel-vue

轮播图插件，相对swiper来说小巧很多，支持react、vue3等等，embla-carousel-vue是vue版本的。

embla-carousel-react

轮播图插件，相对swiper来说小巧很多，支持react、vue3等等，embla-carousel-react是react版本的。