七个可提高前端开发效率的工具及插件

　　前端已经不是以前的样子了，随着React 18（服务器组件）和所有现代网络堆栈的出现，前端开发真正意味着应用开发。

　　我们开发网络和本地应用程序的方式变得更加模块化、组件化、有组织，因此我们应该减少对实现和配置的关注，而更多地关注应用程序的创建和组成。

　　这个列表不会介绍那些你还没听说过但会改变你日常生活的新的前沿工具，而会介绍那些会帮助加快前端开发速度的改变游戏规则的、很受欢迎的工具，使你成为一个更好的开发者——并获得更多的空闲时间。

　　1. 比特--组件驱动的10倍

　　事实上，现代的前端已经是组件驱动的。现代应用程序是用现代框架构建的，而现代框架是以组件为中心的。

　　比特是一体化工具组件驱动开发的下一代工具。与其构建一个由许多组件组成的应用程序，不如用Bit构建独立的组件，用它们来组成不同的应用程序。每个组件都是独立的，可以在任何地方运行。

　　虽然Bit把你变成了组件创建和组合的大师，但Bit的云平台帮助团队扩展并共同构建许多东西。

　　比特的开放源码软件工具是轻量级和高度可扩展的。它用于开发和合成组件。它为开发和组合组件提供了一个简单而强大的工作空间，将任何 repo 变成一个智能的 monorepo，同时抽象掉开销和配置。

　　它提供了很好的功能，如可重复使用的可定制的组件模板，漂亮的可视化组件文档（有mdx等），独立的单元测试，每个组件的版本管理和导出（推送/发布）等等。

　　而且，它有一个可视化的UI，使开发体验也很有趣！Bit的本地工作区UI中的一个非常基本的按钮

　　比特的云平台淘宝网是20多万开发者和一些世界上最好的团队的家，他们可以在这里托管和合作开发他们的组件。它为一个 “开箱即用的组件市场 ”配备了企业级功能，包括安全托管、搜索、注册表等等。一个应用程序只是一个组件图。。.。。.用户界面、钩子、逻辑，甚至后端。

　　Bit是一个强大的基础设施，它的模式转变已经在发生了。开始使用Bit的流行用例包括微前端（尝试Bit与模块联盟！）、 设计系统（在组件上进行协作）、快速应用开发（只需编译组件）和产品团队的快速交付（升级组件，而不是应用）。

• 　　模块联盟+比特=前端的下一次进化
• 　　比特：模块化网络的平台

　　2. GatsbyJS和NextJS - 最快的JAMStack网站

　　GatsbyJS和NextJS是JAMStack时代的两个突出的静态网站框架。在正确的用例中，使用这两个选项之一可以大大加快新网站的开发速度，这要归功于现成的框架、丰富的模板和高度优化的工具集，可以开始建设。

　　GatsbyJS是一个免费的、开源的、基于React的框架，旨在帮助开发者建立高性能的网站和应用程序。简单地说，GatsbyJS是一个利用React的静态网站生成器。事实上，它可以让你部署静态页面（在编译时获取数据），这实际上是React应用程序。随着时间的推移，它在性能、速度和开发体验方面都得到了很好的优化。

　　Next.js是一个开源的React前端开发网络框架，由Vercel创建，可以实现服务器端渲染和为基于React的网络应用生成静态网站等功能。Next通常被认为是一种更稳健和灵活的方式来生成网站甚至是应用程序。

　　这两个框架都有数以千计的插件和多年的优化，在建立一个静态网站时，是真正快速启动和运行的好方法。

　　如何进行选择取决于你的项目。它们都不是为了一个完整的现代应用程序，但都提供了一些额外的扩展功能，推动了JAMStack静态网站的极限。

　　3. Netlify和Vercel--前端开发的后端

　　Vercel和Netlify是两个在很多方面都不相上下的平台。

　　两者都为前端开发者提供了一个简单的方法来部署静态网站。两者都抽象出必须处理服务器和微服务来部署网站的痛苦和开销，并为前端开发者提供一个非常简单和友好的工作流程来托管和部署他们的静态网站。

　　Netlify创建了自己的仓库，同时推送到Github仓库和自己的微服务。然后，它在一个广泛的CDN上执行和分发内容，以提供预先建立的静态网站。

　　Vercel是一个面向前端开发者的部署平台。Vercel使开发者能够托管即时部署和自动扩展的网站和网络服务--所有这些都无需任何复杂的服务器配置。

　　这两个平台都提供了构建、部署和托管的解决方案。这两个托管平台都有一个与github集成的工作流程，以及无服务器功能支持和不同的API等很酷的功能。虽然Netlify的开发体验很好，但Vercel的一个巨大优势是服务器端渲染，它可以让你在几分钟内轻松部署一个完全工作的Next.js应用程序。

• 　　在Netlify、Vercel和Digital Ocean之间做出选择
• 　　Netlify vs. Vercel

　　4. Ripple CI - 传播组件驱动的构建

　　当使用Bit的组件驱动工作时，你可以享受Ripple CI。

　　虽然仍处于封闭测试阶段【获得访问权】（mailto： [e-mail]），但Ripple无疑是网络的一项决议。它只构建组件。

　　更准确地说，它构建了所有受影响的组件——无处不在。当你推送一个组件的变化时，Bit “知道 ”哪些其他组件依赖于该组件，并将传播和构建变化到所有受影响的组件，跨越所有不同的应用程序。

　　想象一下，当你对一个按钮或卡片进行修改时，看着Ripple将修改传播到所有使用你的卡片组件的应用程序，以及依赖它的每个组件和页面。就这样，Ripple不断整合整个组织。

　　比特的团队正在使用由瑞波更新的组件构建服务

　　由于每个组件都是独立构建的，你可以很容易地了解到底是哪个变化破坏了哪个组件，在哪里，以及为什么。

　　由于Ripple构建的只是组件，它还可以节省大量的构建时间，只需不构建没有变化的东西。一些使用Ripple测试版的团队证实，它可以减少90%的构建时间。

　　而且，Ripple利用Bit为组件、页面和应用程序的每一个变化创建可视化预览。这是科幻小说，而且很有效。

　　5. Stencil和Svelte - 真正的网络组件

　　建立在Web组件标准基础上的自定义组件和小工具，将在现代浏览器上工作，并可用于任何与HTML一起工作的JavaScript库或框架。

　　模板是一个 “用于构建快速、可重复使用的UI组件和渐进式Web应用程序的Web组件编译器”。它使用TypeScript、JJSX、微小的虚拟DOM层、高效的单向数据绑定、异步渲染管道来加载来生成基于标准的Web组件。

　　Stencil还释放了一些功能，如无需运行无头浏览器的服务器端渲染、预渲染和 “作为属性的对象”（而不只是字符串）。Stencil组件很容易创建，因为它们本质上是带有装饰器元数据的ES6/TypeScript类。

　　Svelte是 “一个编译器，当你的应用程序的状态发生变化时，它将你的声明性组件转换为高效的JavaScript，以手术方式更新DOM”。这意味着，你可以使用CSS、HTML和纯JavaScript构建无模板的组件，而Svelt会将其编译成具有内置反应性的小而轻的JS。

　　另一个有用的能力是JS库中对任何框架无关的CSS的内置支持。

　　6. Jest和Cypress--测试驱动的乐趣

　　二者关键的区别是什么，应该在什么项目中使用哪一个是关键。

　　Cypress是一个开源的工具（现在是一个商业平台），用于现代网络的前端自动化测试。Cypress建立在一个新的架构上，在与被测试的应用程序相同的运行循环中运行。因此，Cypress为在浏览器中运行的任何东西提供更好、更快、更可靠的测试。Cypress适用于任何前端框架或网站。

　　Jest是一个 “令人愉快的JavaScript测试框架，专注于简单性”--这说明了很多问题。Jest采取一种熟悉的方法。它建立在Jasmine测试框架之上，使用熟悉的expect（value）.toBe（other）断言，自动模拟由require（）返回的CommonJS模块，使大多数现有代码可以测试，并且有一个简短的反馈循环。DOM APIs被模拟，测试通过一个小型的node.js命令行工具并行运行。

　　关键的区别是，Cypress最常被用于端到端测试，而Jest则用于单元测试。你也可以反过来，将两者用于相反的用例，但这是常见的惯例。了解更多。

　　我用Jest、Enzyme、测试库和Cypress测试了一个React应用。以下是不同之处。

　　7. Sentry - 简单的全栈式应用监控

　　Sentry.io是一个开源的全栈错误跟踪系统，支持广泛的服务器、浏览器、桌面和本地移动语言和框架。那么，为什么Sentry会出现在前端开发者的名单中呢？

　　因为它是一种为网络开发体验而设计的，给前端和全栈开发人员一个非常简单和友好的体验，用于捕捉问题，防止错误到达生产，监控性能，而且都是通过一个简单的SDK，在2个命令中安装。而且UI/UX的使用也非常简单和友好。

　　使用Sentry，你还可以追踪由后端引起的前端错误，给你一个全面的全栈方法来监控和修复webdev错误。你可以得到关于应用程序状态的上下文，这样你就能够理解特定问题的影响。更重要的是，所有未处理的异常都会被自动捕获，单个错误会被及时发现和处理。
责编AJX