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

来源 | IT智云编程javascript

19年，又是新的一年，“前端届”，又出了哪些新的“玩意”，今天向你推荐目前比较热门新鲜度靠前的50款前端工具，但愿在新的一年里，对你有所帮助。css

1、构建工具

一、 Parcel

https://parceljs.org/前端

Parcel是一款极速零配置WEB应用打包工具，快速、几乎零配置是它最大的特色，开箱即用。相比webpack，Parcel对于新手来讲何尝不是一个很好的选择。vue

二、 Critters

github.comjava

一款webpack的插件，它能够很方便的配置内联关键css( critical CSS ),其他的css部分则会异步加载，因为它不使用无头浏览器(headless browser)呈现内容，所以快速轻巧。react

三、sucrase

sucrase.io/ 若是你用typscript构建React项目，sucrase将是一个不错的选着，它的编译速度将是Babel的20倍。sucrase——一款ES6+编译器，重点关注非标准语言，例如Typescript，JSX和Flow。
jquery

四、Webpack Config Tool

webpack.jakoblind.no/webpack

一款可视化的在线工具网站，你只须要选择前端项目运用到技术和相关配置，就能一键帮你生成webpack.config.js，省去你很多的麻烦。git

五、JSUI

github.com/kitze/JSUIgithub

JSUI 是一个可视化分类、构建和管理 JavaScript 项目的工具。无论是前端应用仍是后端应用，也不论使用的是哪一种框架，只要项目有一个 package.json ，便可进行管理。

六、PWA Universal Builder

pwa.cafe/

一款脚手架构建工具，方便建立基于Preact，React，Vue和Svelte的项目，开箱及支持Babel，Bublé，Browserlist，TypeScript，PostCSS，ESLint，Prettier和Service Workers！

七、VuePress

vuepress.vuejs.org/

VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另外一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每个由 VuePress 生成的页面都带有预渲染好的 HTML，也所以具备很是好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其余的页面则会只在用户浏览到的时候才按需加载。

2、框架和库

八、 PWA Starter Kit

pwa-starter-kit.polymer-project.org/

经过功能丰富的WEB组件快速帮你构建功能齐全的PWA网站项目，几乎零配置，完成了构建、测试和快速部署。

九、PaperCSS

www.getpapercss.com/

一个不太常规的CSS框架，若是你但愿你的网站有手绘风格感受，选择它准没错。

十、boardgame.io

boardgame.io/

BOARDGAME.IO是 Google 开源的一个游戏框架，旨在容许游戏做者将游戏规则从本质上转化为一系列简单的函数，这些函数用于描述当一个指定动做发生时游戏的状态变化，框架负责处理表述性状态传递。 无需再手动编写任何网络或后端代码。 功能特性：

• 状态管理：自动跨浏览器、服务器和存储器无缝管理游戏状态；

• 快速成型：在渲染游戏以前调试界面以模拟更改。

• 多人游戏：全部链接到同一游戏的浏览器都实时同步，无需刷新。

• 私密状态：私密信息可从客户端隐藏。

• 日志：游戏日志可查看任意时间的信息。

• UI 工具包：经常使用于游戏中的 React 组件。

十一、Stimulus

stimulusjs.org

Stimulus是一个适度的前端框架，它并不试图接管整个前端的方方面面，不关心如何渲染HTML，相反用来加强HTML的相关行为。若是你的团队规模较小，但又想要和那些使用比较费力的主流方案的较大团队竞争，那么这是一个比较适合的前端框架方案。

十二、sapper

sapper.svelte.technology/

Sapper是一个相似Next.js的框架，具备极高的性能和内存效率，具有代码分割，服务端渲染的现代框架功能，是一款军工级别的框架。

1三、Reakit

reakit.io/

使用这个框架能让你快速搭建漂亮的React UI 交互站点。

1四、Evergreen

evergreen.segment.com/

更为强大的React UI 框架，有一套很是标准的UI设计语言帮你构建企业级的具备国际范设计风格的WEB应用，这个框架相似咱们国内的ant.design（https://ant.design/docs/spec/colors-cn）

3、HTML和CSS工具

1五、 keyframes.app

keyframes.app

一款基于时间关键帧，在线制做网页动画的网站，你无需在编辑器和浏览器直接互相切换，及所见即所得。keyframes.app提供在线制做和谷歌浏览器扩展插件两种形式。制做完成后，你能很方便的将自动产生的CSS代码复制到你的项目中。

1六、 Emotion

emotion.sh/

Emotion是一款用JavaScript编写css的库，支持字符串和对象两种方式声明CSS变量，若是你在使用React，试用这个库将让你以更加优雅的方式用JavaScript编写CSS。

1七、modern-normalize

github.com

normalize.css可让浏览器以接近标准的方式一致地渲染全部元素，并且不一样于cssrest，只针对须要正常化的元素。modern-normalize只针对现代浏览器，并且足够现代，甚至IE和Edge都已经放弃。

1八、layerJS

layerjs.org/

一款你只须要编写HTML就能很轻松实现菜单、画框、弹出层、滚动视察、缩放、触摸手势等众多效果的框架，这个框架代码压缩版只有30KB,很方便与各类前端框架集成(Angular,VueJS,React),支持响应式和触摸，而且不依赖任何库就能实现。

1九、css-blocks

css-blocks.com/

一款受 CSS Modules, BEM 和 Atomic CSS 框架启发，为你的web应用组件提供完美的CSS模块方案。

20、usebasin

usebasin.com/

一款你只须要设计表单，无需编写后端代码，就能很方便的将表单应用集成到你的项目里。

2一、mustard

mustard-ui.com/

一款适合初学者的CSS框架，可是看起来还蛮不错，模块化，开源，压缩版只有6KB，支持FLEX,Grid布局和自带一些漂亮UI,好比进度条，表单、按钮等，虽然小，但功能齐全。

4、javascript工具

2二、ScrollHint

appleple.github.io

一个JS库，用于指示元素能够水平滚动，并带有指针图标，若是你在作一个新手引导，这个工具将会是一个不错的选择。

2三、ToastUI editor

github.com

强大的Markdown编辑器tui.editor,方便集成到你的项目里，这款强大的富媒体编辑器有如下特色：

• 支持 CommonMark 与 GFM（GitHub Flavored Markdown）两种标准

• 支持丰富的扩展插件，如颜色选择器、图表、UML、表格合并

• 提供了所见即所得与 Markdown 这两种模式，在编辑过程当中能够随时切换，很是方便。在所见即所得模式下，能够直接从浏览器、 Excel、PPT等复制文本，而且保留原来的格式

2四、FilePond

github.com

Filepond 是一个用于文件上传的 JavaScript 库，能够上传任何内容，优化图像以得到更快的上传速度，并提供一个出色的，可访问的，流畅的用户体验。

Filepond 提供了多种上传方式：拖放，复制和粘贴文件，浏览文件系统或仅使用库的API。 gzip 压缩后仅有 21KB ，而且内置了图像优化和图像自动调整功能。

Filepond 适用于 React ， Vue ， Angular 和 jQuery 。

2五、Dinero.js

sarahdayan.github.io/dinero.js/

一个用来建立、计算和格式化货币价值的不可变的框架。

不管在银行应用程序、电子商务网站仍是证券交易所平台，咱们天天都在与金钱互动。咱们也愈来愈依赖技术来处理问题。

然而，关于如何以编程处理货币价值尚无共识。虽然金钱是现代社会中广泛存在的概念，但相较于日期和时间之类的东西，它并非任何主流语言中的一流数据类型。结果，每一种软件都有本身的处理方式，且伴随着陷阱。

Dinero.js遵循Fowler的模式更多一点儿。它容许你在JavaScript中建立、计算和格式化货币值。你能够进行数学运算、解析和格式化对象，使你的开发过程更加轻松。

该库设计为不可变和可连接的模式。它支持全局设置，具备扩展格式选项，并提供本机国际化支持。

2六、Swup

github.com/gmrchk/swup

一款适合初学者的框架，方便灵活易用，让你能快速制做专业级的页面转场动画效果。

2七、Selection.js

simonwep.github.io/selection/

简单易用的可视化，支持鼠标拖拽、使用Cmd/Ctrl+click 选择页面元素的库（支持分组选择），大大节省了你的开发时间。只有3KB大小，不依赖jQuery。

2八、Glider.js

nickpiscitelli.github.io/Glider.js/

一个超快速(25毫秒加载)，轻量级(小于3KB)，无依赖性(不须要jQuery)的制做幻灯效果的前端库，支持响应式，易于扩展，方便自定义事件等...，更多特性等待你的发现！

2九、ScrollOut

scroll-out.github.io/

一款帮你制做专业级Scroll滚动效果（滚动视差）的框架，框架大小不到1KB,使用回调的方式将相关动画元素的属性进行实时分配，方便你作出个性化的动态效果。

本身是从事了五年的前端工程师，很多人私下问我，2019年前端该怎么学，方法有没有？

没错，年初我花了一个多月的时间整理出来的学习资料，但愿能帮助那些想学习前端，却又不知道怎么开始学习的朋友。

5、图标、图表工具

30、Orion Icon Library

orioniconlibrary.com/

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

3一、Frappe Charts

frappe.io/charts

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

3二、SVGator

www.svgator.com/

若是您但愿将Web图形提高到一个新的水平，那么动画SVG就是您的选择，而SVGator是您能够用来建立它们的最简单的工具之一。

一款专业级的SVG动画制在线制做工具。SVGator还具备代码管理器面板，所以您能够准确地看到应用程序生成的代码。SVGator导出干净，格式良好的代码。

3三、ApexCharts

apexcharts.com/

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

3四、MapKit JS

developer.apple.com

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

3五、Img2

github.com

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

3六、Lozad

github.com

Lozad.js 是基于 IntersectionObserver API 的轻量级、高性能、可配置的纯 JavaScript而且无依赖的懒加载器，其可以被用于进行图片、iframe 等多种形式的元素。

经过gzip压缩事后，仅仅1kb大小，相对于经常使用的jquery.lazyload.js来讲，lozad.js实力碾压，虽然jquery.lazyload.js也才几kb大小。在github上，已经收获了4800+的star。

React工具

3七、RSUITE

rsuitejs.com/

React Suite 是一套 React 组件库，为后台产品而生。由 HYPERS 前端团队与 UX 团队打造，主要服务于公司大数据产品线。

经历了三次大的版本更新后，累积了大量的组件和丰富的功能。并支持在线定制个性化主题，更重要的是有中文版，方便咱们学习使用。

3八、Pagedraw

pagedraw.io/

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

3九、react-smooth-dnd

github.com/kutlugsahin…

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

40、Unstated

unstated.io/

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

4一、Reach Router

reach.tech/router

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

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

• 更少的配置

• 更好用

• 基本同样的api,学习成本很是低

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

4二、SVGR

www.smooth-code.com/

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

4三、React Spreadsheet Grid

github.com/

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

测试和数据工具

4四、webhint

webhint.io/

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

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

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

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

4五、Airtap

github.com/airtap/airt…

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

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

不要只是声称你的 JavaScript 支持“全部浏览器”，用测试证实它！

4六、mkcert

github.com/FiloSottile…

HTTPS 是 Web 发展的趋势，用于提升网站的安全性。使用 HTTPS 须要配置 TLS 证书，得益于 ACME 协议和 Let's Encrypt 证书，远程环境能够很容易部署。可是对于本地环境，尚未广泛有效的证书。

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

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

4七、Puppeteer Recorder

checklyhq.com/docs/puppet…

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

4八、jsonstore.io

www.jsonstore.io/

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

4九、Initab

initab.com/

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

50、lambdatest

www.lambdatest.com/

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

最后

但愿这些工具对你们有所帮助和启发，祝各位在新的一年里前端技术棒棒的，薪资翻翻，一块儿在国内推进大前端的将来！