2019又是一个新的一年，前端领域又发布了哪些新鲜玩意呢？今天给大家推荐50款热门又新鲜的前端工具，希望在新的一年里，能够对大家有所帮助。

1. 构建工具1.

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

2、

一个可以轻松配置内联关键 CSS 的插件，其余 CSS 将异步加载。由于它不使用无头浏览器 () 来呈现内容，因此它快速且轻量级。

3.

.io/如果你用它来构建你的项目，它将是一个不错的选择，它的编译速度将快20倍。 ——一个专注于JSX和Flow等非标准语言的ES6+编译器。

4.工具

..不/

一个可视化的在线工具网站，你只需要选择要应用技术的前端项目以及相关配置，它就能一键帮你生成.js，省去你很多麻烦。

5. 江苏省建筑学会

//JSUI

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

6. 渐进式网页应用

pwa.cafe/

一个脚手架构建工具，可轻松创建基于 Vue 和 的项目。它支持 Bublé、、、、、和！

7.

/

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

每个生成的页面都带有预渲染的 HTML，具有非常好的加载性能和搜索引擎优化（SEO），同时，一旦页面加载完成，Vue 就会接管这些静态内容，并将其转换为完整的单页应用程序（SPA），其他页面只有在用户浏览到它时才会按需加载。

2. 框架和库 8. PWA Kit

/

它通过功能丰富的WEB组件帮助你快速构建一个功能齐全的PWA网站项目，几乎零配置即可完成搭建、测试和快速部署。

9，

一个非传统的CSS框架，如果你想让你的网站有手绘的感觉，它是正确的选择。

10. .io

.io/

.IO 是一个开源游戏框架，允许游戏作者将游戏规则本质上转化为一系列简单的函数，描述指定动作发生时游戏的状态变化。框架负责处理声明性状态。无需手动编写任何网络或后端代码。特点：

11.

它是一个温和的前端框架，并不试图接管整个前端的所有方面。它不关心如何渲染 HTML，而是用它来增强 HTML 的相关行为。如果你的团队规模很小，但想用更费力的方式与更大的团队竞争主流解决方案，那么这是一个更合适的前端框架解决方案。

12.

../

它是一个类似 Next.js 的框架，具有极高的性能和内存效率，以及代码分割、服务端渲染等现代框架功能，是一款军用级框架。

13.

.io/

使用这个框架可以让你快速构建漂亮的UI交互网站。

14.

/

比较强大的UI框架，拥有非常标准的UI设计语言，帮助你构建具有国际化设计风格的企业级WEB应用。这个框架跟我们国内的蚂蚁有点类似。()

HTML 和 CSS 工具

15. .应用程序

。应用程序

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

16.

.sh/

它是一个编写 CSS 的库。它支持以两种方式声明 CSS 变量：字符串和对象。如果你正在使用它，尝试一下这个库将使你能够以更优雅的方式编写 CSS。

17.-

.css 允许浏览器以接近标准的方式一致地呈现所有元素，并且与 .css 不同，它仅针对需要规范化的元素。 - 仅针对现代浏览器，并且足够现代，甚至 IE 和 Edge 都放弃了。

18.

/

一个框架，让你只需编写 HTML 就能轻松实现菜单、图片框架、弹出层、滚动检查、缩放、触摸手势等诸多效果。此框架代码压缩版仅有 30KB，非常方便与各类前端框架（、、）集成，支持响应式和触摸，不依赖任何库即可实现。

19.css-

/

受 CSS、BEM 和 CSS 框架启发的 CSS 模块解决方案，为您的 Web 应用程序组件提供完美的 CSS 模块解决方案。

20.

/

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

21，

/

一个适合初学者的CSS框架，但是看上去还不错，模块化，开源，压缩版只有6KB，支持FLEX，Grid布局并且自带一些漂亮的UI，比如进度条，表格，按钮等，虽然小，但是功能齐全。

4. 工具 22

..io

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

23，

强大的编辑器tui.，轻松集成到您的项目中，这个强大的富媒体编辑器有以下特点：

24，

它是一个文件上传库，可以上传任何内容，优化图像以加快上传速度，并提供出色、易用、流畅的用户体验。

它提供多种上传方式：拖放、复制和粘贴文件、浏览文件系统或仅使用库的 API。经过 gzip 压缩后，它只有 21KB，并具有内置图像优化和图像自动调整大小功能。

适用于 Vue、 和。

25. .js

..io/.js/

用于创建、计算和格式化货币价值的不可变框架。

无论是银行应用程序、电子商务网站还是股票交易平台，我们每天都会与金钱打交道。我们也越来越依赖技术来处理它。

然而，对于如何以编程方式处理货币值，并没有达成共识。虽然货币是现代社会中无处不在的概念，但与日期和时间等相比，它在任何主流语言中都不是一流的数据类型。因此，每个软件都有自己的做事方式，而这会带来自己的陷阱。

.js 遵循了更多的模式。它允许您创建、计算和格式化货币值。您可以进行数学运算、解析和格式化对象，从而使您的开发过程更加轻松。

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

26. 交换

//交换

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

27. .js

..io//

易于使用的可视化，支持鼠标拖动，使用 Cmd/Ctrl+ 选择页面元素（支持组选择），大大节省您的开发时间。大小只有 3KB，无依赖关系。

28. .js

..io/.js/

一个超快（25毫秒加载）、轻量级（小于3KB）、无依赖（非必需）的制作幻灯片效果的前端库，响应迅速、易于扩展、方便自定义事件等...，更多功能等待您的发现！

29.

-出..io/

一款帮助您制作专业滚动特效（滚动视差）的框架，框架大小小于1KB，使用回调实时赋值相关动画元素的属性，让您轻松制作个性化的动效。

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

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

5. 图标和图表工具 30. 图标

/

多达6000个专业且免费的SVG矢量图标，还支持深度定制，如更改配色方案、更改线条粗细、更改图标样式（细线、粗线、扁平化）以及一键生​​成相关代码等。

31.

.io/

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

32.

如果您希望将您的网页图形提升到一个新的水平，动画 SVG 是您的最佳选择，也是您可以用来创建它们的最简单的工具之一。

专业级 SVG 动画在线创建工具。它还具有代码管理器面板，因此您可以准确查看应用程序生成的代码。导出干净、格式良好的代码。

33.

/

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

34. JS

提供的地图工具，如果你想制作类似 官网的地图风格，此工具会是一个不错的选择，它允许你在地图上添加交互事件，丰富你的地图应用。

35.图片2

一款自动图片预加载和缓存工具，可防止图片闪烁，并使用模糊滤镜预先显示图片，以延迟图片加载并提高网页加载速度。使用起来非常简单。您只需使用

选择

只需贴上标签，使用就这么简单！

36.

.js 是一个轻量级、高性能、可配置、纯粹、无依赖的基于 API 的懒加载器，可用于图片等多种元素。

经过gzip压缩后，大小只有1kb，相比于常用的.js，.js功能更强大，虽然.js也只有几kb，但.js在国内已经收获了4800多颗star。

工具 37，

/

它是一个针对后端产品设计的组件库，由前端团队和UX团队共同打造，主要服务于公司的大数据产品线。

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

38.

.io/

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

39.--dnd

/…

一个页面元素拖拽工具，拖动效果流畅，让您轻松拖动卡片、列表、表单组件。

40.

.io/

新的状态管理库.js：简洁易用/合理。完全不同于以往的管理库思路，这个侧重于（不是全局的，一个小的改变影响整棵树），多个也可以共享，兼具 flux 的易用性和 flux 的合理性，让人耳目一新；它完全是为“够用”而设计的，所以你不会觉得你在使用第三方组件。

41.

.tech/

- 是一套基于前成员 Ryan 开发的路由控件，既然已经有比较成熟的了，为什么还要再弄一个呢？有兴趣的同学可以去了解一下，小编认为它有以下几个主要特点，值得一看：

42. SVGR

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

43.网格

/

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

测试和数据工具 44.

.io/

该项目提供了一个开源检查工具，用于检查代码的可访问性、性能和安全性。在创建网站和应用程序时，需要改进的细节越来越多。为此，我们努力帮助开发人员标记这些细节。

在线扫描器可用作命令行界面 (CLI) 工具和在线扫描器，是入门的最快方式。在线扫描器需要公共 URL 来运行报告并深入了解应用程序的运行情况。条件。

在应用测试时提供了三种运行环境： 、 和 Edge，后两种运行环境使用协议，第一种运行环境使用 Node.js 环境，可以在没有浏览器支持的情况下快速进行有限的检查。

还有更多强大的功能等待你去尝试和探索。

45.

//空气…

它是一种在浏览器中进行测试的简单方法，声称可以覆盖 800 多种浏览器。您可以在几秒钟内开始在本地测试代码，并无缝传输到 Labs 提供的基于云的浏览器。让您的测试获得更好的覆盖范围。

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

不要仅仅声称您支持“所有浏览器”，请通过测试来证明这一点！

46.

/…

它是 Web 发展的一个趋势，用于提高网站的安全性。它需要配置 TLS 证书。借助 ACME 协议和 Let's 证书，可以轻松部署远程环境。但是，对于本地环境，没有普遍有效的证书。

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

该证书由您的私人 CA 签名，运行时 - 它会自动配置这些信任，因此当浏览器访问它时，它会显示安全标志。目前支持、、、、和 Java。甚至支持一些移动设备。

47.

/文档/…

它是一个 Node 库，提供控制或协议上的高级 API。它常用于爬虫、自动化测试等。你在浏览器中手动做的大部分事情都可以用它完成。

48. .io

.io 为小型项目提供免费、安全、基于 JSON 的云数据存储。只需输入、复制 URL 并开始发送 HTTP 数据请求。POST 请求将保存数据，PUT 请求将修改数据，GET 请求将删除数据，POST 请求将检索数据。它极大地方便了前端开发人员集成测试接口。前端页面完成后即可进行接口测试。使用就是这么简单。

49.

/

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

50.

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

终于

希望这些工具对大家有帮助和启发，祝大家在新的一年里前端技术大进步，工资翻倍，共同推动中国大前端的未来！

设置星号，以免迷路

有很多美好的事情你想看

谢谢大家的阅读，如果觉得我的公众号不错的话，请推荐给你的朋友，非常感谢。

前端高手爱好者：每天一篇前端技术文章，不定期发前端干货