乐趣区

关于javascript:2020前端开发者11个必备的网站

网上有很多很棒的工具,让作为前端开发人员的咱们生存的更加轻松。在这篇文章中,我将疾速介绍一下我在开发工作中常常应用的 11 种工具。

Node.green

用来查问以后 Node 版本是否某些性能。例如, 对象开展符(Rest/Spread Properties)

能够看到在 Node v8.3.0 以下是不反对的。别离在 Node v8.5.0v8.2.1 下运行以下代码片段

const a = {foo: 1};
console.log({...a, b: 2}); 

当你遇到以上谬误,那大多就是 Node 版本问题啦。

在线地址: https://node.green/

CanIUse

当你想要确定某个 Web API 的兼容性的时候,这个在线工具将轻松搞定。

假如咱们想晓得哪些浏览器及其版本将反对 Web Share API:navigator.share(...

查看后果。浏览器和反对 navigator.share(…) 的版本都列出了。

在线地址: https://caniuse.com/

Minify

为了缩小利用程序代码的包大小,咱们在公布到到生产环境的时候,须要使它们最小化。最小化打消了空格,有效代码等。这可能使利用程序包大小的显着减小,从而节俭浏览器上的加载工夫。(尽管在当下,有 webpack uglifyJS 等插件,然而当我在开发非打包的简略利用的时候,这个是一个不错的抉择。)

在线地址: https://www.minifier.org/

Bit.dev

Bit.dev是一个十分棒的组件核心。能够用它来托管,记录和治理来自不同我的项目的可复用组件。这是减少代码复用,减速开发并优化团队合作的好办法。

这也是从头开始构建设计零碎的不错抉择(因为它实质上具备设计零碎所需的所有)。Bit.devBit 完满配合,Bit 是解决组件隔离和公布的开源工具。

Bit.dev反对 React,带有TypeScriptReactAngularVue等。

在线地址: https://bit.dev/

Unminify

收费的在线工具,用于最小化(解压,反混同)JavaScript,CSS 和 HTML 代码,使其可读性强,好看

在线地址: https://unminify.com/

Stackblitz

这是每个人都喜爱的工具。Stackblitz 使咱们可能应用世界上最风行和应用最多的 IDE,即 web 上的 Visual Studio 代码。

只需单击一下,Stackblitz 即可疾速提供 AngularReactVueVanillaRxJSTypeScript 我的项目的框架。

当你想从浏览器中尝试一段代码或任何以后 JS 框架中的性能时,Stackblitz十分有用。假如你正在浏览 Angular 文章,并且遇到了想要尝试的代码。您能够最小化您的浏览器并疾速搭建一个新的 Angular 我的项目。

还有其余很棒的在线 IDE,然而我置信 Stackblitz 的转折点是应用每个人都喜爱的 Visual Studio Code感觉和工具。(ps: 自己应用体验, 十分疾速晦涩, 附上图,比 sandbox 快很多)

在线地址: https://stackblitz.com/

JWT.io

如果您应用 JSON Web 令牌(JWT)爱护应用程序平安,或者应用 JWT 容许用户拜访后端的受爱护资源。

决定是否应拜访路线或资源的一种办法是查看令牌的到期工夫。有时候咱们想要解码 JWT 以查看其无效 payload,jwt.io 恰好提供了这一点。

这个在线工具使咱们可能插入令牌以查看其无效 payload。一旦咱们粘贴了令牌,jwt.io便对该令牌进行解码并显示其无效payload

在线地址: https://jwt.io/

BundlePhobia

您是否已经不确定过 node_modules 的大小,或者只是想晓得将 pakckage.json 装置在您的计算机中的大小?BundlePhobia 提供了答案

该工具使咱们可能加载 package.json 文件,并显示将从 package.json 装置的依赖项的大小,也能够查问单包的体积。

在线地址: https://bundlephobia.com/

Babel REPL

Babel是一个收费的凋谢源代码 JS 转编译器,用于将古代 ES 代码转换为一般的 ES5 JavaScript。

该工具是 Babeljs 团队在网上建设的 Web 利用,能够将 ES6 + 代码转换为 ES5。

自己总结的两个比拟不便的应用形式

  1. 方面面试时在线写高级语法。
  2. 能够疾速查看某些 polyfill 是怎么写的。

在线地址: https://babeljs.io/en/repl

Prettier Playground

Prettier 是一个自以为是的 JS 代码格式化程序。它通过解析代码并应用 JS 最佳编码实际将其从新打印来施行统一的款式。

该工具已在咱们的开发环境中宽泛应用,但它也具备一个在线地址,你能够在其中丑化您的代码。

在线地址: https://prettier.io/playground

postwoman

postwoman 是一款功能强大的网页调试和模仿发送 HTTP 申请的 Chrome 插件,反对简直所有类型的 HTTP 申请,操作简略且不便。可用于接口测试,比方测试你用 easy-mock 生成的接口。

在线地址: https://postwoman.io/

本文翻译自 https://blog.bitsrc.io/12-use… 然而不仅仅是单纯地翻译,替换了原文中一些我感觉不太实用的并退出一些本人的总结。

最初

如果我的文章有帮忙到你,心愿你也能帮忙我,欢送关注我的微信公众号 秋风的笔记 ,回复 好友 二次,可加微信并且退出交换群, 秋风的笔记 将始终陪伴你的左右。

退出移动版