[23] 2021 年 7 月十大必备 Web 开发工具

大家好👋。我的假期正式开始了🥳，我想向大家介绍我的博客文章系列七月刊——十大最佳 Web 开发工具。每个月我都会挑选一些最有趣、最实用的工具，我相信这些工具是每个 Web 开发者必备的。这次推荐的是：

1). Next.js

这次我想从 Next.js 开始，它实际上不是一个工具，而是一个完整的框架，包含混合静态和服务器渲染、TypeScript 支持、智能打包、路由预取等功能。我一直想在一些项目中使用它，最终在我的最后一个Web 应用中实现了它。Next.js 为您提供了创建 API 以及使用路由和导航的最简单的方法。必须说，它的整体开发者体验非常出色，绝对值得一试。

https://nextjs.org/

2). 维生素

Vite 是一款速度极快且易于配置的构建工具。它使用esbuild进行打包，该工具用 Go 编写，预打包依赖项的速度比基于 JavaScript 的打包工具快 10 到 100 倍。我最近在我的一个最新项目中使用了 Vite ，目前正计划将我的网站迁移到 Vite（从 create-react-app 迁移到 Vite，包括使用 webpack）。

https://vitejs.dev/

3). 捆绑恐惧症

Bundlephobia 是一个非常有用的项目，它可以帮助您找到 npm 包对性能的影响。

https://bundlephobia.com/

4). SVG 路径可视化工具

此网络工具允许您以可视化的方式探索 SVG 路径。

https://svg-path-visualizer.netlify.app/

5). 夹子

Clippy 可能是创建 CSS 剪切路径最简单的方法。我还推荐你看看Bennett Feely的其他项目，因为他的方法很有意思。

https://bennettfeely.com/clippy/

6). Google 的 Material Design 图标

Google 提供的优质图标集。Font Awesome和Material UI Icons值得关注的替代品。

https://fonts.google.com/icons

7).海庆

Haikei 是一款非常鼓舞人心的网络工具，用于生成独特的 SVG 形状、背景和图案。

https://app.haikei.app/

8). CSS 参考

来自Bulma创建者的免费 CSS 视觉指南。

https://cssreference.io/

9). Snappify

Snappify 是另一个用于创建漂亮代码片段的工具。它的工作原理几乎与我在之前的一篇文章中提到的Ray.so完全一样。

https://snappify.io/

10). JS 很奇怪

严格来说，它算不上什么工具，而是一个有趣的测验，能让你发现 JavaScript 中最奇葩的部分。我居然得了 16 分（满分 25 分）😀。请在评论区分享你的答案🤓。

https://jsisweird.com/

原帖@create-react-app.com

我的网站https://villivald.com/
GitHub https://github.com/villivald
Twitter https://twitter.com/crapp_blog