这50款前端热门工具简直不要太好用了！（3）-白红宇

这50款前端热门工具简直不要太好用了！（3）

阅读量：5963 次

发布时间：2019-06-19

本文共 8261 字，大约阅读时间需要 27 分钟。

上两篇介绍了构建、框架和库、CSS和HTML、JavaScript相关的工具，这篇文章小编将介绍剩余21款工具，希望在新的一年里对大家有所帮助。

## 图标、图表工具

### 30、Orion Icon Library

[orioniconlibrary.com/](https://link.juejin.im?target=https%3A%2F%2Forioniconlibrary.com%2F)

![](https://upload-images.jianshu.io/upload_images/13133049-f7bebb22f1fac206.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

多达6000专业免费的SVG矢量图标，还支持深度的定制，比如更换配色，更改线条粗细，变换图标风格(细线条、粗线条、扁平)，一键生成相关代码。

### 31、Frappe Charts

[frappe.io/charts](https://link.juejin.im?target=https%3A%2F%2Ffrappe.io%2Fcharts)

![](https://upload-images.jianshu.io/upload_images/13133049-3c7f78151aacdfbd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

一款简单、专业、开源、现代风格的SVG报表工具,不需要任何依赖库，代码风格简单，简单易用。支持一键导出svg代码。

### 32、SVGator

[www.svgator.com/](https://link.juejin.im?target=https%3A%2F%2Fwww.svgator.com%2F)

![](https://upload-images.jianshu.io/upload_images/13133049-28f1b2bc5f984e6c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

如果您希望将Web图形提升到一个新的水平，那么动画SVG就是您的选择，而SVGator是您可以用来创建它们的最简单的工具之一。一款专业级的SVG动画制在线制作工具。SVGator还具有代码管理器面板，因此您可以准确地看到应用程序生成的代码。SVGator导出干净，格式良好的代码。

### 33、ApexCharts

[apexcharts.com/](https://link.juejin.im?target=https%3A%2F%2Fapexcharts.com%2F)

![](https://upload-images.jianshu.io/upload_images/13133049-8854679c5edb1f86.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

ApexCharts.JS 是一个现代化 JavaScript 图表库，用于使用简单的 API 构建交互式图表和可视化，功能十分强大。方便你将图表嵌入到你的Vue、React项目中。

### 34、MapKit JS

[developer.apple.com/maps/mapkit…](https://link.juejin.im?target=https%3A%2F%2Fdeveloper.apple.com%2Fmaps%2Fmapkitjs%2F)

![](https://upload-images.jianshu.io/upload_images/13133049-4ae79ada136cc954.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

一款苹果公司提供的地图工具，如果想制作和苹果官方网站一样的地图风格，这个工具将是一个不错的选择，允许你在地图上添加交互事件，丰富你的地图应用。

### 35、Img2

[github.com/RevillWeb/i…](https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FRevillWeb%2Fimg-2)

![](https://upload-images.jianshu.io/upload_images/13133049-819db73e275fac52.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

一款图片自动预加载和缓存工具，防止图片闪烁，并使用模糊滤镜预先显示图片延迟图片加载，提高网页加载速度，使用起来非常简单，你只需要使用<img-2>替代<img/>标签即可，使用起来就是这么简单！

### 36、Lozad

[github.com/ApoorvSaxen…](https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FApoorvSaxena%2Flozad.js)

![](https://upload-images.jianshu.io/upload_images/13133049-6310bf7c7613b6b6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Lozad.js 是基于 IntersectionObserver API 的轻量级、高性能、可配置的纯 JavaScript并且无依赖的懒加载器，其能够被用于进行图片、iframe 等多种形式的元素。通过gzip压缩过后，仅仅1kb大小，相对于常用的jquery.lazyload.js来说，lozad.js实力碾压，虽然jquery.lazyload.js也才几kb大小。在github上，已经收获了4800+的star。

## React工具

### 37、RSUITE

[rsuitejs.com/](https://link.juejin.im?target=https%3A%2F%2Frsuitejs.com%2F)

![](https://upload-images.jianshu.io/upload_images/13133049-2539ff2ee29c2864.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

React Suite 是一套 React 组件库，为后台产品而生。由 HYPERS 前端团队与 UX 团队打造，主要服务于公司大数据产品线。经历了三次大的版本更新后，累积了大量的组件和丰富的功能。并支持在线定制个性化主题，更重要的是有中文版，方便我们学习使用。

### 38、Pagedraw

[pagedraw.io/](https://link.juejin.im?target=https%3A%2F%2Fpagedraw.io%2F)

![](https://upload-images.jianshu.io/upload_images/13133049-3ae7f9512d5e37b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

一款神奇的在线UI设计制作工具，你只需要拖动和布局页面，这个工具就会给你自动生成质量高的React组件代码，更多功能等待你的发掘。

### 39、react-smooth-dnd

[github.com/kutlugsahin…](https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fkutlugsahin%2Freact-smooth-dnd)

![](https://upload-images.jianshu.io/upload_images/13133049-ef00a8b83b62227d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

一款拖拽页面元素的React工具，拖拽效果平滑，让你轻松就能实现卡片、列表、表单组件的的拖拽。

### 40、Unstated

[unstated.io/](https://link.juejin.im?target=https%3A%2F%2Funstated.io%2F)

一个新的状态管理类库 unstated.js：简单易用/合理。和之前的 state 管理库思路完全不同，这个unstated主打 local state（不是全局store，一个小改动导致整棵树 rerender），多个 local state 之间也可以共享，兼具了redux的易用性与flux的合理性，令人耳目一新；unstated完全就是为React设计的，“足够React”，让你感觉不到在用第三方组件。

### 41、Reach Router

[reach.tech/router](https://link.juejin.im?target=https%3A%2F%2Freach.tech%2Frouter)

![](https://upload-images.jianshu.io/upload_images/13133049-da8e6e57be05bf48.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Reach-Router 是前 ReactRouter 成员 Ryan Florence 开发的一套基于 react 的路由控件. 那么已经有比较成熟的 ReactRouter 了, 为什么要”再”做一套 Router 呢, 有兴趣的同学可以去了解一下,小编认为主要有以下几个特点值得你看看：

* 小，就4kb,压缩后比react-router小40kb左右。

* 更少的配置

* 更好用

* 基本一样的api,学习成本非常低

* 源码非常简洁，总共就3个文件，900行，如果你想深入理解单页应用的路由是怎么实现的，reach-router,绝对是绝佳的下手资料

### 42、SVGR

[www.smooth-code.com/open-source…](https://link.juejin.im?target=https%3A%2F%2Fwww.smooth-code.com%2Fopen-source%2Fsvgr%2F)

![](https://upload-images.jianshu.io/upload_images/13133049-cbf580b7fb078ca0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

svgr是一个将SVG转换为React组件的工具，svgr由JavaScript实现。整个文档也非常的小，已开源在github上。

### 43、React Spreadsheet Grid

[github.com/denisraslov…](https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fdenisraslov%2Freact-spreadsheet-grid)

![](https://upload-images.jianshu.io/upload_images/13133049-35c574365ad42d18.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

用于React类似于Excel的网格组件，具有自定义单元格编辑器，高性能滚动和可调整大小的列。

## 测试和数据工具

### 44、webhint

[webhint.io/](https://link.juejin.im?target=https%3A%2F%2Fwebhint.io%2F)

![](https://upload-images.jianshu.io/upload_images/13133049-8ccb7a6a62cc6952.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Webhint项目提供了一种用于检查代码的可访问性、性能和安全的开源检查（Linting）工具。在创建Web站点和应用中，有越来越多的细节问题亟待完善。为此，Webhint力图帮助开发人员标记这些细节。

Webhint以命令行接口（CLI）工具和在线扫描器两种形式提供，使用在线扫描器是最快的上手方式。使用在线扫描器需要为其提供一个公开的URL，用于运行报告并洞悉应用的运行情况。

在测试应用时，Webhint提供三种运行环境：jsdom、Chrome和Edge。后两种运行环境使用了Chrome DevTools协议，第一种运行环境使用Node.js环境快速地执行有限次数的检查，无需浏览器的支持。

还有更多强大的功能，还有待你试用挖掘。

### 45、Airtap

[github.com/airtap/airt…](https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fairtap%2Fairtap)

![](https://upload-images.jianshu.io/upload_images/13133049-3295d68d01564635.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Airtap 是一种在浏览器中测试 JavaScript 的简单方法，号称能覆盖800多种浏览器，能够在数秒内开始在本地测试你的代码，并无缝转移到由 Sauce Labs 提供的基于云的浏览器上，以获得更好的覆盖测试。

Airtap 与其他跨浏览器测试运行器的不同之处在于其简单性，以及能够在许多浏览器中轻松运行测试套件而无需在本地安装它们。它可以让你在开发过程中快速迭代，并在发布前提供良好的浏览器覆盖率，而不用担心缺少浏览器支持。

不要只是声称你的 JavaScript 支持“所有浏览器”，用测试证明它！

### 46、mkcert

[github.com/FiloSottile…](https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FFiloSottile%2Fmkcert%2Fblob%2Fmaster%2FREADME.md)

![](https://upload-images.jianshu.io/upload_images/13133049-73cce1ac56b70782.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

HTTPS 是 Web 发展的趋势，用于提高网站的安全性。使用 HTTPS 需要配置 TLS 证书，得益于 ACME 协议和 Let's Encrypt 证书，远程环境可以很容易部署。但是对于本地环境，还没有普遍有效的证书。

mkcert 被设计的足够简单，隐藏了几乎所有生成 TLS 证书所必须的知识。它适用于任何主机名或者 IP，包括 localhost ，因为它只在你的本地环境使用。

证书是由你的私有 CA 签发，当你运行 mkcert-install 会自动配置这些信任，因此，当浏览器访问时，就会显示安全标识。目前支持 MacOS、Linux 和 Windows，以及 Firefox、Chrome 和 Java。甚至支持一些手机设备。

### 47、Puppeteer Recorder

[checklyhq.com/docs/puppet…](https://link.juejin.im?target=https%3A%2F%2Fchecklyhq.com%2Fdocs%2Fpuppeteer-recorder%2F)

![](https://upload-images.jianshu.io/upload_images/13133049-c73f92b00aa41641.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Puppeteer 是一个Node库，它提供了一个高级API来控制DevTools协议上的Chrome或Chromium，常用于爬虫、自动化测试等，你在浏览器手动完成的大多数事情都可以使用它来完成。

### 48、jsonstore.io

[www.jsonstore.io/](https://link.juejin.im?target=https%3A%2F%2Fwww.jsonstore.io%2F)

![](https://upload-images.jianshu.io/upload_images/13133049-19e25bbb7d36219f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

jsonstore.io为小型项目提供免费，安全且基于JSON的云数据存储。只需输入https://www.jsonstore.io/，复制URL就可以开始发送HTTP数据请求。POST请求将保存数据，PUT请求修改数据，DELETE请求删除数据和GET请求检索数据。大大方便了前端开发人员进行测试接口的集成，前端页面制作完成就能进行接口测试，使用起来就是这么简单。

### 49、Initab

[initab.com/](https://link.juejin.im?target=http%3A%2F%2Finitab.com%2F)

![](https://upload-images.jianshu.io/upload_images/13133049-dc88a70de5574b11.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

一款为开发人员定制打造的工作台，通过谷歌浏览器插件安装即可使用，通过此工作台你可以轻松订阅你感兴趣的git项目、跟进相关问题、pull相关操作，查看版本历史，订阅Stack Overflow相关的内容，管理查看Gists相关内容，可以说一个主流技术平台聚合工作台。

### 50、lambdatest

[www.lambdatest.com/](https://link.juejin.im?target=https%3A%2F%2Fwww.lambdatest.com%2F)

![](https://upload-images.jianshu.io/upload_images/13133049-567d6f8c03dd0ac7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

一款在线自动化测试云端平台，号称在2000多个真实浏览器和设备进行测试，可以根据你的测试需求进行深度定制，并形成相关记录，方便团队的协作，帮你发现跨平台不同浏览器版本的各种问题。

最后

希望这些工具对大家有所帮助和启发，祝各位在新的一年里前端技术棒棒的，薪资翻翻，一起在国内推动大前端的未来！

转载于:https://my.oschina.net/zybc/blog/3010728

你可能感兴趣的文章