# 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，用起来有时不太方便。

安装指令：

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

```sh
npm install -D webpack webpack-cli
```

#### vite

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

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

安装指令：

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

```sh
npm create vite@latest
```

#### parcel

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

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

安装指令：

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

```sh
npm install --save-dev parcel
```

#### umi

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

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

安装指令：

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

```sh
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 库，全球最流行的前端开发框架之一。

安装指令：

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

```sh
npm install -s react
```

#### vue

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

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

安装指令：

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

```sh
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 脚手架。

安装指令：

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

```sh
npx create-react-app my-app
```

#### vue cli

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

安装指令：

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

```sh
npm install -g @vue/cli
```

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

```sh
vue create hello-world
```

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

```sh
npm install -g @vue/cli-init

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

#### vite

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

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

```sh
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 中，所以项目中其实也可以使用，但最好，但是显式的手动安装一下，表明项目中的开发人员手动的使用了这些图标。

```sh
npm i -S antd @ant-design/icons
```

#### element-ui

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

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

安装指令：

```sh
npm i -s element-ui
```

#### element-plus

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

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

安装指令：

```sh
npm install element-plus --save
```

#### tailwindcss

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

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

### npm 替代品相关

#### npm

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

#### cnpm

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

安装指令：

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

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

#### yarn

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

安装指令：

```sh
npm install -g yarn
```

#### pnpm

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

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

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

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

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

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

安装指令：

```sh
npm install -g pnpm
```

#### nrm

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

安装指令：

```sh
npm install -g nrm
```

### node 进程管理工具

#### nodemon

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

#### pm2

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

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

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

```sh
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 的写法，下面附上它得源码，不想引入库的也可以直接复制源码使用，基本用法见下：

```js
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)
  }
}
```

下面这是它的源码：

```typescript
/**
 * @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的用法，我这个网站中有对应一篇文章讲解使用：[复制插件](https://www.junlli.com/doc/9483ad48cca08818a768d94d426c46f4)。

但 clipboard-polyfill 的 [npm页面](https://www.npmjs.com/package/clipboard-polyfill) 有说明：**从2020年起，您可以在** [**所有主要浏览器的稳定版本**](https://caniuse.com/mdn-api_clipboard_writetext) **中使用 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](https://opensea.io) (最大的nft市场)的 JavaScript SDK。

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

#### qrcodejs2、qrcode-react

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

#### i18n、vue-i18n

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

#### sockjs-client、stompjs

前端使用 WebSocket 的工具。

```js
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](https://github.com/ai/nanoid/blob/HEAD/README.zh-CN.md#%E4%B8%8E-uuid-%E7%9A%84%E6%AF%94%E8%BE%83)

#### 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版本的。
