前端开发中用到过的工具

1.前言

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

2.npm安装工具方式理解

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

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

第一类:安装到dependencies

javascript 复制代码
npm install normalize.css

npm i normalize.css

第二类:安装到dependencies

javascript 复制代码
npm install --save normalize.css

npm install -S normalize.css

npm i -S normalize.css

npm i --save normalize.css

第三类:development

javascript 复制代码
npm i -D normalize.css

npm install -D normalize.css

第四类:安装到整个系统,全局安装

javascript 复制代码
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状态管理的工具

javascript 复制代码
npm install --save zustand
3.2 echarts.js工具

可视化图表工具

javascript 复制代码
npm install --save echarts
3.3 normalize.css工具

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

javascript 复制代码
npm install --save normalize.css
3.4 craco工具

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

javascript 复制代码
npm i -D @craco/craco
3.5 axios工具

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

javascript 复制代码
npm install axios
3.6 ant-design工具

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

javascript 复制代码
npm install antd --save
3.7 sass工具

css样式预处理工具

javascript 复制代码
npm i -D sass
3.8 server工具

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

javascript 复制代码
npm i -D json-server
3.9 react-router-dom工具

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

javascript 复制代码
npm install react-router-dom
3.10classNames工具

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

javascript 复制代码
npm install --save classNames
3.11 toolkith和react-redux工具

react的状态管理工具

javascript 复制代码
npm i @reduxjs/toolkit react-redux
3.12 lodash工具

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

javascript 复制代码
npm i --save lodash
3.13 dayjs工具

一个用于处理时间的工具

javascript 复制代码
npm install dayjs
相关推荐
开心工作室_kaic14 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿33 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具1 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript