作者：微信公众年夜众号 web前端开拓
本日跟你分享一些目前比较热门新鲜度靠前的50款前端工具，希望对你有所帮助。
一、构建工具
1、 Parcel
地址：https://parceljs.org/
Parcel是一款极速零配置WEB运用打包工具，快速、险些零配置是它最大的特点，开箱即用。比较webpack，Parcel对付新手来说未尝不是一个很好的选择。
2、 Critters
地址：github.com
一款webpack的插件，它可以很方便的配置内联关键css( critical CSS ),别的的css部分则会异步加载，由于它不该用无头浏览器(headless browser)呈现内容，因此快速轻巧。
3、sucrase
地址：sucrase.io
如果你用typscript构建React项目，sucrase将是一个不错的选着，它的编译速率将是Babel的20倍。sucrase——一款ES6+编译器，重点关注非标准措辞，例如Typescript，JSX和Flow。
4、Webpack Config Tool
地址：webpack.jakoblind.no
一款可视化的在线工具网站，你只须要选择前端项目利用到技能和干系配置，就能一键帮你天生webpack.config.js，省去你不少的麻烦。
5、JSUI
地址：github.com/kitze/JSUI
JSUI 是一个可视化分类、构建和管理 JavaScript 项目的工具。不管是前端运用还是后端运用，也不论利用的是哪种框架，只要项目有一个 package.json ，即可进行管理。
6、PWA Universal Builder
地址：pwa.cafe/
一款脚手架构建工具，方便创建基于Preact，React，Vue和Svelte的项目，开箱及支持Babel，Bublé，Browserlist，TypeScript，PostCSS，ESLint，Prettier和Service Workers！
7、VuePress
地址：vuepress.vuejs.org/
VuePress 由两部分组成：第一部分是一个极简静态网站天生器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技能文档而优化的默认主题，它的出身初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 天生的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完全的单页运用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
二、框架和库
8、 PWA Starter Kit
地址：pwa-starter-kit.polymer-project.org/
通过功能丰富的WEB组件快速帮你构建功能完好的PWA网站项目，险些零配置，完成了构建、测试和快速支配。
9、PaperCSS
www.getpapercss.com/
一个不太常规的CSS框架，如果你希望你的网站有手绘风格觉得，选择它准没错。
10、boardgame.io
地址：boardgame.io/
BOARDGAME.IO是 Google 开源的一个游戏框架，旨在许可游戏作者将游戏规则从实质上转化为一系列大略的函数，这些函数用于描述当一个指定动作发生时游戏的状态变革，框架卖力处理表述性状态通报。无需再手动编写任何网络或后端代码。功能特性：
状态管理：自动跨浏览器、做事器和存储器无缝管理游戏状态；
快速成型：在渲染游戏之前调试界面以仿照变动。
多人游戏：所有连接到同一游戏的浏览器都实时同步，无需刷新。
私密状态：私密信息可从客户端隐蔽。
日志：游戏日志可查看任意韶光的信息。
UI 工具包：常用于游戏中的 React 组件。
11、Stimulus
地址：stimulusjs.org
Stimulus是一个适度的前端框架，它并不试图接管全体前真个方方面面，不关心如何渲染HTML，相反用来增强HTML的干系行为。如果你的团队规模较小，但又想要和那些利用比较费力的主流方案的较大团队竞争，那么这是一个比较适宜的前端框架方案。
12、sapper
地址：sapper.svelte.technology/
Sapper是一个类似Next.js的框架，具有极高的性能和内存效率，具备代码分割，做事端渲染的当代框架功能，是一款军工级别的框架。
13、Reakit
地址：reakit.io/
利用这个框架能让你快速搭建俊秀的React UI 交互站点。
我自己是一名从事了多年开拓的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适宜2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
14、Evergreen
地址：evergreen.segment.com/
更为强大的React UI 框架，有一套非常标准的UI设计措辞帮你构建企业级的具有国际范设计风格的WEB运用，这个框架类似我们海内的ant.design（https://ant.design/docs/spec/colors-cn）
三、HTML和CSS工具
15、 keyframes.app
地址：keyframes.app
一款基于韶光关键帧，在线制作网页动画的网站，你无需在编辑器和浏览器直接相互切换，及所见即所得。keyframes.app供应在线制作和谷歌浏览器扩展插件两种形式。制作完成后，你能很方便的将自动产生的CSS代码复制到你的项目中。
16、 Emotion
地址：emotion.sh/
Emotion是一款用JavaScript编写css的库，支持字符串和工具两种办法声明CSS变量，如果你在利用React，试用这个库将让你以更加优雅的办法用JavaScript编写CSS。
17、modern-normalize
地址：github.com
normalize.css可以让浏览器以靠近标准的办法同等地渲染所有元素，而且不同于cssrest，只针对须要正常化的元素。modern-normalize只针对当代浏览器，而且足够当代，乃至IE和Edge都已经放弃。
18、layerJS
地址：layerjs.org/
一款你只须要编写HTML就能很轻松实现菜单、画框、弹出层、滚动察看、缩放、触摸手势等浩瀚效果的框架，这个框架代码压缩版只有30KB,很方便与各种前端框架集成(Angular,VueJS,React),支持相应式和触摸，并且不依赖任何库就能实现。
19、css-blocks
地址：css-blocks.com/
一款受 CSS Modules, BEM 和 Atomic CSS 框架启示，为你的web运用组件供应完美的CSS模块方案。
20、usebasin
地址：usebasin.com/
一款你只须要设计表单，无需编写后端代码，就能很方便的将表单运用集成到你的项目里。
21、mustard
地址：mustard-ui.com/
一款适宜初学者的CSS框架，但是看起来还蛮不错，模块化，开源，压缩版只有6KB，支持FLEX,Grid布局和自带一些俊秀UI,比如进度条，表单、按钮等，虽然小，但功能完好。
四、javascript工具
22、ScrollHint
地址：appleple.github.io
一个JS库，用于指示元素可以水平滚动，并带有指针图标，如果你在做一个新手勾引，这个工具将会是一个不错的选择。
23、ToastUI editor
地址：github.com
强大的Markdown编辑器tui.editor,方便集成到你的项目里，这款强大的富媒体编辑器有以下特点：
支持 CommonMark 与 GFM（GitHub Flavored Markdown）两种标准
支持丰富的扩展插件，如颜色选择器、图表、UML、表格合并
供应了所见即所得与 Markdown 这两种模式，在编辑过程中可以随时切换，非常方便。在所见即所得模式下，可以直接从浏览器、 Excel、PPT等复制文本，并且保留原来的格式
24、FilePond
地址：github.com
Filepond 是一个用于文件上传的 JavaScript 库，可以上传任何内容，优化图像以得到更快的上传速率，并供应一个出色的，可访问的，流畅的用户体验。
Filepond 供应了多种上传办法：拖放，复制和粘贴文件，浏览文件系统或仅利用库的API。gzip 压缩后仅有 21KB ，并且内置了图像优化和图像自动调度功能。
Filepond 适用于 React ， Vue ， Angular 和 jQuery 。
25、Dinero.js
地址：sarahdayan.github.io/dinero.js/
一个用来创建、打算和格式化货币代价的不可变的框架。
无论在银行运用程序、电子商务网站还是证券交易所平台，我们每天都在与金钱互动。我们也越来越依赖技能来处理问题。
然而，关于如何以编程处理货币代价尚无共识。虽然金钱是当代社会中普遍存在的观点，但相较于日期和韶光之类的东西，它并不是任何主流措辞中的一流数据类型。结果，每一种软件都有自己的处理办法，且伴随着陷阱。
Dinero.js遵照Fowler的模式更多一点儿。它许可你在JavaScript中创建、打算和格式化货币值。你可以进行数学运算、解析和格式化工具，使你的开拓过程更加轻松。
该库设计为不可变和可链接的模式。它支持全局设置，具有扩展格式选项，并供应本机国际化支持。
26、Swup
地址：github.com/gmrchk/swup
一款适宜初学者的框架，方便灵巧易用，让你能快速制作专业级的页面转场动画效果。
27、Selection.js
地址：simonwep.github.io/selection/
大略易用的可视化，支持鼠标拖拽、利用Cmd/Ctrl+click 选择页面元素的库（支持分组选择），大大节省了你的开拓韶光。只有3KB大小，不依赖jQuery。
28、Glider.js
地址：nickpiscitelli.github.io/Glider.js/
一个超快速(25毫秒加载)，轻量级(小于3KB)，无依赖性(不须要jQuery)的制作幻灯效果的前端库，支持相应式，易于扩展，方便自定义事宜等...，更多特性等待你的创造！
29、ScrollOut
地址：scroll-out.github.io/
一款帮你制作专业级Scroll滚动效果（滚动视差）的框架，框架大小不到1KB,利用回调的办法将干系动画元素的属性进行实时分配，方便你做出个性化的动态效果。
自己是从事了五年的前端工程师，不少人私下问我，2019年前端该怎么学，方法有没有？
没错，年初我花了一个多月的韶光整理出来的学习资料，希望能帮助那些想学习前端，却又不知道怎么开始学习的朋友。
五、图标、图表工具
30、Orion Icon Library
地址：orioniconlibrary.com/
多达6000专业免费的SVG矢量图标，还支持深度的定制，比如改换配色，变动线条粗细，变换图标风格(细线条、粗线条、扁平)，一键天生干系代码。
31、Frappe Charts
地址：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、MapKit JS
地址：developer.apple.com
一款苹果公司供应的舆图工具，如果想制作和苹果官方网站一样的舆图风格，这个工具将是一个不错的选择，许可你在舆图上添加交互事宜，丰富你的舆图运用。
35、Img2
地址：github.com
一款图片自动预加载和缓存工具，防止图片闪烁，并利用模糊滤镜预先显示图片延迟图片加载，提高网页加载速率，利用起来非常大略，你只须要利用<img-2>替代<img/>标签即可，利用起来便是这么大略！
36、Lozad
地址：github.com
Lozad.js 是基于 IntersectionObserver API 的轻量级、高性能、可配置的纯 JavaScript并且无依赖的
通过gzip压缩过后，仅仅1kb大小，相对付常用的jquery.lazyload.js来说，lozad.js实力碾压，虽然jquery.lazyload.js也才几kb大小。在github上，已经收成了4800+的star。
React工具
37、RSUITE
地址：rsuitejs.com/
React Suite 是一套 React 组件库，为后台产品而生。由 HYPERS 前端团队与 UX 团队打造，紧张做事于公司大数据产品线。
经历了三次大的版本更新后，累积了大量的组件和丰富的功能。并支持在线定制个性化主题，更主要的是有中文版，方便我们学习利用。
38、Pagedraw
地址：pagedraw.io/
一款神奇的在线UI设计制作工具，你只须要拖动和布局页面，这个工具就会给你自动天生质量高的React组件代码，更多功能等待你的发掘。
39、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”，让你觉得不到在用第三方组件。
41、Reach Router
地址：reach.tech/router
Reach-Router 是前 ReactRouter 成员 Ryan Florence 开拓的一套基于 react 的路由控件. 那么已经有比较成熟的 ReactRouter 了, 为什么要”再”做一套 Router 呢, 有兴趣的同学可以去理解一下,
小，就4kb,压缩后比react-router小40kb旁边。
更少的配置
更好用
基本一样的api,学习本钱非常低
源码非常简洁，统共就3个文件，900行，如果你想深入理解单页运用的路由是怎么实现的，reach-router,绝对是绝佳的下手资料
42、SVGR
地址：www.smooth-code.com/
svgr是一个将SVG转换为React组件的工具，svgr由JavaScript实现。全体文档也非常的小，已开源在github上。
43、React Spreadsheet Grid
地址：github.com/
用于React类似于Excel的网格组件，具有自定义单元格编辑器，高性能滚动和可调度大小的列。
测试和数据工具
44、webhint
地址：webhint.io/
Webhint项目供应了一种用于检讨代码的可访问性、性能和安全的开源检讨（Linting）工具。在创建Web站点和运用中，有越来越多的细节问题亟待完善。为此，Webhint力争帮助开拓职员标记这些细节。
Webhint以命令行接口（CLI）工具和在线扫描器两种形式供应，利用在线扫描器是最快的上手办法。利用在线扫描器须要为其供应一个公开的URL，用于运行报告并洞悉运用的运行情形。
在测试运用时，Webhint供应三种运行环境：jsdom、Chrome和Edge。后两种运行环境利用了Chrome DevTools协议，第一种运行环境利用Node.js环境快速地实行有限次数的检讨，无需浏览器的支持。
还有更多强大的功能，还有待你试用挖掘。
45、Airtap
地址：github.com/airtap/airt…
Airtap 是一种在浏览器中测试 JavaScript 的大略方法，号称能覆盖800多种浏览器，能够在数秒内开始在本地测试你的代码，并无缝转移到由 Sauce Labs 供应的基于云的浏览器上，以得到更好的覆盖测试。
Airtap 与其他跨浏览器测试运行器的不同之处在于其大略性，以及能够在许多浏览器中轻松运行测试套件而无需在本地安装它们。它可以让你在开拓过程中快速迭代，并在发布前供应良好的浏览器覆盖率，而不用担心短缺浏览器支持。
不要只是声称你的 JavaScript 支持“所有浏览器”，用测试证明它！
46、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。乃至支持一些手机设备。
47、Puppeteer Recorder
地址：checklyhq.com/docs/puppet…
Puppeteer 是一个Node库，它供应了一个高等API来掌握DevTools协议上的Chrome或Chromium，常用于爬虫、自动化测试等，你在浏览器手动完成的大多数事情都可以利用它来完成。
48、jsonstore.io
地址：www.jsonstore.io/
jsonstore.io为小型项目供应免费，安全且基于JSON的云数据存储。只需输入https://www.jsonstore.io/，复制URL就可以开始发送HTTP数据要求。POST要求将保存数据，PUT要求修正数据，DELETE要求删除数据和GET要求检索数据。大大方便了前端开拓职员进行测试接口的集成，前端页面制作完造诣能进行接口测试，利用起来便是这么大略。
49、Initab
地址：initab.com/
一款为开拓职员定制打造的事情台，通过谷歌浏览器插件安装即可利用，通过此事情台你可以轻松订阅你感兴趣的git项目、跟进干系问题、pull干系操作，查看版本历史，订阅Stack Overflow干系的内容，管理查看Gists干系内容，可以说一个主流技能平台聚合事情台。
50、lambdatest
地址：www.lambdatest.com/
一款在线自动化测试云端平台，号称在2000多个真实浏览器和设备进行测试，可以根据你的测试需求进行深度定制，并形成干系记录，方便团队的协作，帮你创造跨平台不同浏览器版本的各种问题。
我自己是一名从事了多年开拓的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适宜2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取
