前端开发中用到过的工具

1.前言

本文是记录本人在前端开发中遇到过的工具，会不断更新；以及对于npm安装工具方式的理解。

2.npm安装工具方式理解

简单的拿normalize.css这个工具来举例，以下都是安装normalize.css这个工具的方式

按照简写分类，同类安装方式效果一模一样

第一类：安装到dependencies

npm install normalize.css

npm i normalize.css

第二类：安装到dependencies

npm install --save normalize.css

npm install -S normalize.css

npm i -S normalize.css

npm i --save normalize.css

第三类：development

npm i -D normalize.css

npm install -D normalize.css

第四类：安装到整个系统，全局安装

npm install -g normalize.css

2.1区别说明

1.install的简写是i，--save的简写是-S,注意大小写和中划线的变化

2.第一类和第二类的区别不明显，在生产环境中，通常推荐只使用第一类的形式，而在开发过程中推荐使用第二类。这能确保依赖的透明性和版本的控制。会在pack.json依赖文件中的dependencies地方声明，正式上线后会使用到这个工具。

3.第三类则是安装开发依赖项，这些依赖只在开发环境中用于构建和测试工具（如工具库、构建工具等）。会在pack.json依赖文件中的development地方声明，正式上线后不会使用到这个工具。

4.第四类则是将工具安装在我们系统中，不管是哪个项目都能使用。比如我们npm工具就是全局安装的，一般不会使用这类安装方式

3.react中的工具

3.1 zustand.js工具

react中平替Redux状态管理的工具

npm install --save zustand

3.2 echarts.js工具

可视化图表工具

npm install --save echarts

3.3 normalize.css工具

去除浏览器默认样式，比如body的内外边距

npm install --save normalize.css

3.4 craco工具

react中重新配置路径的工具（将src改成@）

npm i -D @craco/craco

3.5 axios工具

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

npm install axios

3.6 ant-design工具

react开发中使用最广泛的ui组件库

npm install antd --save

3.7 sass工具

css样式预处理工具

npm i -D sass

3.8 server工具

react中用于搭建本地服务器，用于模拟后端服务器的行为，运行后相当于请求后端接口一样

npm i -D json-server

3.9 react-router-dom工具

一个用于构建react路由库的工具，简单来说就是用于创建路由实例从而配置路由

npm install react-router-dom

3.10classNames工具

react中用于动态添加类名，通过条件判断是否添加类名

npm install --save classNames

3.11 toolkith和react-redux工具

react的状态管理工具

npm i @reduxjs/toolkit react-redux

3.12 lodash工具

是一个一致性、模块化、高性能的 JavaScript 实用工具库，提供许多方法来简化我们的代码

npm i --save lodash

3.13 dayjs工具

一个用于处理时间的工具

npm install dayjs

4.node.js中的工具

4.1 nrm工具

切换下载源，用于切换淘宝镜像和国外服务器下载源

npm install -g nrm

4.2 i5ting_toc工具

将.md文件转换成.html文件；使用方式：i5ting_toc -f 要转换的文件路径 -o

npm install -g i5ting_toc

4.3 nodemon工具

监听项目文件的变动，当代码被修改后，nodemon会自动帮助我们重启项目，无需再关闭服务器再重启服务器

npm i -g nodemon

4.4 express工具

基于 Node.js 平台，快速、开放、极简的 Web 开发框架，用于快速创建web服务器

npm i express@4.17.1 --save

4.5 cors工具

用于解决跨域问题的工具

npm i cors

4.6 mysql工具

用于连接数据库并对数据进行增删改查

npm i mysql

4.7 express-session工具

用于认证用户

npm i express-session

4.8 jsonwebtoken和express-jwt工具

jsonwebtoken用于生成JWT字符串，express-jwt用于将JWT字符串解析还原成JSON对象，总的来说就是用来生成token

npm i jsonwebtoken express-jwt

4.9 bcryptjs工具

对用户密码加密处理

npm i bcryptjs

4.10 @hapi/joi和@escook/express-joi工具

用于表单验证，@hapi/joi定义验证规则，@escook/express-joi自动进行校验

npm i @hapi/joi @escook/express-joi

5.Electron中的工具

5.1 electron

开发pc端应用的工具

npm i electron -D

5.2 electron-builder工具

electron项目打包工具

npm i electron-builder -D

6.vue中的工具

6.1 vue-diff

vue3中用来比较数据差异的插件，可以把有差异的地方通过颜色标识出来，相当于vscode，vue2中可以使用diff插件

npm i vue-diff

6.2 vue-draggable-next

vue3中用来拖拽div的插件，vue2中应该不能用

npm i vue-draggable-next