来源| https://www.jianshu.com/p/182b69e54fe8

作者:微信微信官方账号web前端开发

今天我想和大家分享一下目前比较热门和新鲜的50大前端工具，希望对你有所帮助。

首先，构建工具

1、包裹

地址:https://parceljs.org/

Parcel是一款速度极快的零配置WEB应用打包工具，它最大的特点就是快且几乎零配置，开箱即用。相对于webpack，Parcel是新手不错的选择。

2、动物

地址:github.com

webpack的一个插件，可以轻松配置内联css(关键css，其余CSS异步加载。因为它不使用无头浏览器来呈现内容，所以速度快，重量轻。

3、蔗糖酶

地址:sucrase.io

如果用typscript构建React项目，sucrase会是个不错的选择，它的编译速度会是Babel的20倍。sucrase-一个ES6+编译器，专注于非标准语言，如Typescript、JSX和Flow。

4、Webpack配置工具

地址:webpack.jakoblind.no

一个可视化的在线工具网站，你只需要选择前端项目申请技术和相关配置，就可以一键生成webpack.config.js，省去了你很多麻烦。

5、JSUI

地址:github.com/kitze/JSUI

JSUI是一个可视化分类、构建和管理Javascript项目的工具。不管是前端应用还是后端应用，也不管用的是哪种框架，只要项目有package.json就可以管理。

6、PWA通用生成器

地址:pwa.cafe/

一款脚手架搭建工具，方便基于Preact，react，Vue，Svelte创建项目，支持Babel，Bublé，Browserlist，Typescript，PostCSS，ESLint，appeller和Service Workers开箱即用！

7、抑郁

地址:vuepress.vuejs.org/

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

VuePress生成的每个页面都有预渲染的HTML，所以有非常好的加载性能和搜索引擎优化(SEO)。同时，一旦页面被加载，Vue将接管静态内容，并将其转化为完整的单页应用(SPA)，而其他页面只有在用户浏览时才会按需加载。

二。框架和库

8、PWA入门套件

地址:pwa-starter-kit.polymer-project.org/

通过丰富的web组件，快速帮你搭建全功能PWA网站项目，几乎零配置，完成搭建、测试、快速部署。

9、纸质

www.getpapercss.com/

一个非常规的CSS框架。如果你想让你的网站有手绘风格的感觉，选择它是对的。

boardgame.io

地址:boardgame.io/

棋盘游戏。IO是Google的一个开源游戏框架，旨在让游戏作者将游戏规则转化为一系列本质上简单的功能。这些函数用来描述游戏在特定动作发生时的状态变化，框架负责处理表情状态转移。不需要手动编写任何网络或后端代码。特点:

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

快速原型制作:在渲染游戏之前，调试界面以模拟变化。

多人游戏:所有连接到同一游戏的浏览器实时同步，无需刷新。

私有状态:私有信息可以对客户端隐藏。

日志:游戏日志可以随时查看信息。

UI工具包:游戏中常用的React组件。

11、刺激

地址:stimulusjs.org

刺激是一个适度的前端框架。它并不试图接管整个前端的方方面面，也不关心HTML如何渲染。相反，它用于增强HTML的相关行为。如果你的团队很小，但是你想和使用更费力的主流解决方案的更大的团队竞争，那么这是一个更合适的前端框架解决方案。

12、工兵

地址:sapper.svelte.technology/

Sapper是一个类似Next.js的框架，性能和内存效率都很高。具有代码分段和服务器端渲染的现代框架功能，是军用级框架。

13、打破僵局

地址:reakit.io/

使用这个框架，您可以快速构建一个漂亮的React UI交互站点。

我是一个从事开发多年的老web前端程序员。目前辞职做自己的web前端私人定制课程。今年年初，我花了一个月的时间整理了一个最适合2019年学习的干货web前端学习产品。各种框架整理出来发给每一个前端朋友。想要获取，可以关注我的头条号，后台私信我:前端，免费获取。

14、常青树

地址:evergreen.segment.com/

对于更强大的React UI框架，有一套非常标准的UI设计语言来帮助你构建具有国际设计风格的企业级WEB应用。这个框架类似于Ant。设计(https://ant.design/docs/spec/colors-cn)在中国。

三。HTML和CSS工具

15、keyframes.app

地址:keyframes.app

一个基于时间关键帧在线制作网页动画的网站。不需要直接在编辑器和浏览器之间切换，所见即所得。Keyframes.app提供在线制作和谷歌Chrome扩展。制作完成后，您可以轻松地将自动生成的CSS代码复制到您的项目中。

16、情感

地址:emotion.sh/

Emotion是一个用Javascript写css的库，支持两种方式声明CSS变量:字符串和对象。如果您正在使用React，尝试这个库将让您以更优雅的方式用Javascript编写CSS。

17、现代-正常化

地址:github.com

Normalize.css允许浏览器以近乎标准的方式一致地呈现所有元素，与cssrest不同，它只针对需要规范化的元素。Modern-normalize只针对现代浏览器，足够现代到连IE和Edge都放弃了。

18、图层

地址:layerjs.org/

一个你可以轻松实现菜单、图片框、弹出层、滚动检查、缩放、触摸手势等多种效果的框架。仅仅通过写HTML。这个框架代码压缩版只有30KB，方便集成各种前端框架(Angular，VueJS，React)，支持响应式和触控，不需要任何库就可以实现。

19、css块

地址:css-blocks.com/

受CSS模块、BEM和原子CSS框架的启发，它为您的web应用程序组件提供了一个完美的CSS模块方案。

20、使用盆

地址:usebasin.com/

你只需要设计表单，不需要写后端代码，就可以轻松地将表单应用集成到你的项目中。

芥末

地址:mustard-ui.com/

一个适合初学者的CSS框架，但是看起来还不错。它是模块化开源的，压缩版只有6KB。它支持FLEX，网格布局和一些漂亮的用户界面，如进度条，表单，按钮等。虽然小，但功能齐全。

四。javascript工具

ScrollHint

地址:appleple.github.io

一个JS库，用来指示元素可以水平滚动，带有指针图标。如果是做新手指南，这个工具会是个不错的选择。

23、托阿斯图伊编辑

地址:github.com

Tui.editor是一个强大的Markdown编辑器，很容易集成到您的项目中。这款功能强大的富媒体编辑器具有以下特性:

支持CommonMark和gfm (github favorite markdown)标准。

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

提供两种模式，WYSIWYG和Markdown。编辑过程中可以随时切换，非常方便。在所见即所得模式下，可以直接从浏览器、Excel、PPT等中复制文字。，并保持原来的格式。

24、鱼塘

地址:github.com

Filepond是一个用于文件上传的Javascript库，它可以上传任何内容，优化图像以加快上传速度，并提供优秀、可访问和流畅的用户体验。

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

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

Dinero.js

地址:sarahdayan.github.io/dinero.js/

创造、计算和格式化货币价值的不变框架。

无论是在银行应用、电商网站，还是股票交易平台，我们每天都在和钱打交道。我们也越来越依赖技术来处理问题。

但是，对于如何以编程方式处理货币值，还没有达成共识。虽然金钱在现代社会中是一个无处不在的概念，但与日期和时间这样的东西相比，它在任何主流语言中都不是一流的数据类型。于是乎，每一种软件都有自己的处理方式，都伴随着陷阱。

Dinero.js更遵循福勒的模式。它允许你用Javascript创建、计算和格式化货币值。您可以执行数学运算，解析和格式化对象，使您的开发过程更加容易。

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

26、Swup

地址:github.com/gmrchk/swup

一个适合初学者的框架，方便、灵活、易用，让你快速做出页面过渡的专业级动画效果。

Selection.js

地址:simonwep.github.io/selection/

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

Glider.js

地址:nickpiscitelli.github.io/Glider.js/

一个超快速(25毫秒加载)、轻量级(小于3KB)、无依赖性(无jQuery)的前端库，用于制作幻灯片效果，支持响应、易于扩展、方便定制事件等...更多功能等待您的发现！

ScrollOut

地址:scroll-out.github.io/

一帧帮你做出专业级滚动效果(滚动视差)。帧大小小于1KB，通过回调实时分配相关动画元素的属性，方便你制作个性化的动态效果。

我做前端工程师五年了。很多人私下问我2019年前端怎么学？有什么方法吗？

是的，年初我花了一个多月的时间整理学习资料，希望能帮助到那些想学前端，但又不知道如何开始学习的朋友。

动词 （verb的缩写）图标和图表工具

30、猎户座图标库

地址:orioniconlibrary.com/

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

31、弗雷贝图表

地址:frappe.io/charts

一个简单，专业，开源，现代风格的SVG报告工具，没有任何依赖库，代码风格简单，易于使用。支持一键导出svg代码。

32、SVGator

地址:www.svgator.com/

如果您想将Web图形提升到一个新的水平，那么动画SVG是您的选择，SVGator是您可以用来创建它们的最简单的工具之一。

一个专业的SVG动画在线制作工具。SVGator还有一个代码管理器面板，因此您可以准确地看到应用程序生成的代码。SVGator导出干净且格式良好的代码。

33、ApexCharts

地址:apexcharts.com/

ApexCharts。JS是一个现代的Javascript图表库，用简单的API来构建交互式图表和可视化，功能非常强大。您可以方便地将图表嵌入到您的Vue和React项目中。

34、地图工具包JS

地址:developer.apple.com

苹果公司提供的地图工具。如果你想制作和苹果官网一样的地图风格，这个工具会是一个不错的选择，可以让你在地图中加入互动事件，丰富你的地图应用。

35、Img2

地址:github.com

一款图片自动预加载和缓存工具，防止图片闪烁，并使用模糊滤镜预先显示图片延迟图片加载，提高网页加载速度，使用起来非常简单，你只需要使用替代标签即可，使用起来就是这么简单！一个自动图像预加载和缓存工具，防止图像闪烁，并使用模糊过滤器提前显示图像，以延迟图像的加载，提高网页的加载速度。它的使用非常简单，你只需要使用

36、洛扎德

地址:github.com

Lozad.js是一个轻量级、高性能、可配置的纯Javascript和无依赖的懒惰加载器，基于IntersectionObserver API，可用于制作图片、iframe等元素。

经过gzip压缩后，大小只有1kb。与常用的jquery.lazyload.js相比，lozad.js被碾压，虽然jquery.lazyload.js只有几kb大小。在github上，已经收获了4800+星。

反应工具

37、套房

地址:rsuitejs.com/

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

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

38、页面绘制

地址:pagedraw.io/

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

39、反应-平滑-无干扰

地址:github.com/kutlugsahin…

一个用于拖动页面元素的React工具，具有平滑的拖动效果，允许您轻松地拖放卡片、列表和表单组件。

40、未声明

地址:unstated.io/

一个新的状态管理类库unstated.js:好用/合理。和之前国家管理图书馆的思路完全不同。这种未声明的侧重于局部状态(不是全局存储，而是一个小的改变导致整个树的重新渲染)，多个局部状态也可以共享，融合了redux的易用性和flux的合理性，令人耳目一新；Unstated完全是为React设计的，“React够了”让你觉得你在用第三方组件。

41、到达路由器

地址:reach.tech/router

Reach-Router是ReactRouter的前成员Ryan Florence开发的一套基于react的路由控制。那么，已经有成熟的React路由器了，为什么还要“重新”做一个路由器呢？有兴趣的同学可以了解一下。边肖认为，有以下几个主要特点值得关注:

小，只有4kb，压缩后比react-router小40kb左右。

较少配置

更好的使用

同样的基础api，学习成本非常低。

源代码非常简洁，一共3个文件，900行。如果想深入了解单页应用的路由是如何实现的，reach-router绝对是一个绝佳的入门材料。

42、SVGR

地址:www.smooth-code.com/

Svgr是一个将SVG转换成React组件的工具。svgr是用Javascript实现的。整个文档也很小，已经在github上开源。

43、反应电子表格网格

地址:github.com/

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

以及测试和数据工具。

44、网络提示

地址:webhint.io/

Webhint project提供了一个开源检查(林挺)工具，用于检查代码的可访问性、性能和安全性。网站和应用程序的创建中需要改进的细节越来越多。为此，Webhint试图帮助开发者标记这些细节。

Webhint以两种形式提供:命令行界面(CLI)工具和在线扫描程序。使用在线扫描仪是最快的入门方式。要使用在线扫描仪，必须为其提供一个公共URL，该URL可用于运行报告并深入了解应用程序的运行情况。

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

还有更强大的功能等你去发掘。

45、Airtap

地址:github.com/airtap/airt…

Airtap是一种在浏览器中测试Javascript的简单方法，号称覆盖800多种浏览器。它可以在几秒钟内开始在本地测试您的代码，并无缝转移到Sauce Labs提供的基于云的浏览器，以进行更好的覆盖测试。

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

不要只是宣称你的Javascript支持“所有浏览器”，用测试来证明！

mkcert

地址:github.com/FiloSottile…

HTTPS是Web发展的趋势，用来提高网站的安全性。需要将TLS证书配置为使用HTTPS。由于ACME协议和加密证书，远程环境可以很容易地部署。但是，对于本地环境，没有普遍有效的证书。

Mkcert的设计非常简单，足以隐藏生成TLS证书所需的几乎所有知识。它适用于任何主机名或IP，包括localhost，因为它只在您的本地环境中使用。

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

木偶记录器

地址:checklyhq.com/docs/puppet…

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

jsonstore.io

地址:www.jsonstore.io/

Jsonstore.io为小型项目提供免费、安全、基于JSON的云数据存储。只需输入https://www.jsonstore.io/并复制URL，就可以开始发送HTTP数据请求。POST请求保存数据，PUT请求修改数据，DELETE请求删除数据，GET请求检索数据。极大地方便了前端开发人员集成测试接口。前端页面做好之后，就可以测试界面了。它使用起来非常简单。

49、Initab

地址:initab.com/

为开发者定制的工作台，安装谷歌Chrome插件即可使用。通过这个工作台，你可以方便的订阅你感兴趣的git项目，跟进相关问题，拉相关操作，查看版本历史，订阅栈溢出相关内容，管理查看Gists相关内容。可以说是一个主流的技术平台聚合工作台。

50、羔羊测试

地址:www.lambdatest.com/

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

我是一个从事开发多年的老web前端程序员。目前辞职做自己的web前端私人定制课程。今年年初，我花了一个月的时间整理了一个最适合2019年的干货web前端学习产品。各种框架整理出来发给每一个前端朋友。想要获取，可以关注我的头条号，后台私信我:前端，免费获取。