你值得拥有的 11 个前端开发利器 _前端开发

文章插图
作者 | Chidume Nnamdi
译者 | 孙薇，责编 | 伍杏玲
头图 | CSDN 下载自视觉中国
出品 | CSDN（ID：CSDNnews）
以下为译文：
笔者将在本文中分享自己在开发生涯中常用的11种前端工具。
1.CanIUse
地址：https://caniuse.com/
有时候不太确定某个Web API与浏览器、手机浏览器能否兼容？这个工具让你轻松测试Web API与浏览器的兼容情况。
当我们想要了解哪些浏览器及相应版本支持Web Share API：navigator.share(...)

文章插图
在工具里简单查询便可查看结果。如图，列出了所有支持navigator.share(...)的浏览器及相应版本。
2.Minify地址：http://minify.com/
我们使用这个工具让即将发布到生产环境中的应用代码包缩减至最小，通过删减空格、无效代码等操作，使得应用包显著缩小，从而令浏览器的加载时间缩短。
这款在线工具minify.com支持压缩Web应用。
3.Bit.dev地址：https://bit.dev/
Bit.dev可用来托管、记录、管理来自不同项目的可复用组件。对于增加代码重用、加速开发和优化团队协作极其有效。
这也是我们从头构建设计系统的好选择，因为它具有设计系统所需的一切。Bit.dev可以与Bit这款处理组件隔离和发布的开源工具完美匹配。
Bit.dev支持React、React、TypeScript、Angular、Vue等许多库。

文章插图
上图展示了在Bit.dev中搜索共享React组件的过程。
4.Unminify地址：https://unminify.com/
这款工具可以逆转压缩操作，支持对JS、css及html代码的反压缩。通过解压缩、反混淆及美化，可以让一段压缩后的JS代码再次变为可读的。
5.Stackblitz地址：https://stackblitz.com/
这款工具适合所有人， Stackblitz让我们可以在Web上使用Visual Studio Code 。
只需点击一下， Stackblitz即可快速支持Angular、React、Vue、Vanilla、RxJS、TypeScript项目。
当你想用浏览器尝试执行一段代码，或是任何操作当前JS框架的某个功能时， Stackblitz就会大显身手。假如你正在阅读一篇Angular文章，想要尝试其中的代码，就可以最小化浏览器并快速搭建一个新的Angular项目了，非常快速简便。
6.JWT.io地址：https://jwt.io/
使用JSON网络令牌（JWT）来保障应用安全性，或是用JWT来支持用户访问后端受保护资源的情况下，决定是否应当访问路径或资源的方法之一是检查令牌的到期时间。有时候，我们希望解码某个JWT以查看其有效负载，就可以使用jwt.io 。
这款在线工具支持上传token令牌，来查看有效负载。可以采用粘贴， jwt.io就会对令牌进行解码，并显示其有效负载。
7.BundlePhobia地址：https://bundlephobia.com/
当我们不确定node_modules的大小，或想要确认某个即将安装在机器上pakckage.json的大小时，就可以使用BundlePhobia ，它让我们可以了解某个npm包添加到前端软件包后对系统性能的影响。
这款工具可上传单个package.json文件，并展示从package.json所安装的依赖项大小。
8.Babel REPL地址：https://babeljs.io/en/repl
Babel是一个免费的开源JS转编译器，可将ES6+代码转为旧的ES5 JS代码，由Bebeljs团队开发。这款工具允许尝试添加到ES的内容，或者某些特定阶段添加到ECMA的内容，还可美化代码、限制文件大小，让使用者在转编译的过程中尝试不同的版本。
9.Prettier Playground地址：https://prettier.io/playground
Prettier是一个偏向JS代码格式化程序。通过解析代码，并使用JS重新输出，来实现一致性样式。这款工具在我们的开发中广泛使用，它有在线平台来美化代码。
10.Postman地址：https://www.postman.com/
这款工具可快速测试自己的API：GET、POST、DELETE、OPTIONS、PUT ，笔者正在用这款工具，值得一试。
11.JSLint地址：https://jslint.com
在JS linter的世界中， JSLint排名最高。这款在线工具可在浏览器中插入一段JS代码或JS文件，这是一款静态代码分析工具，用于检查JS源代码是否符合编码规则。