2022 最快的前端开发工具总结

Jest、Yarn 核心成员 Christoph Nakazawa 最近发布了他认为的 2022 前端最「快」的开发工具链。包括：

• Vite
• Tailwind
• pnpm
• Eslint & Prettier
• Typescript
• React

模板仓库地址：https://github.com/cpojer/vite-ts-react-tailwind-template。
原文在这里：https://cpojer.net/posts/fastest-frontend-tooling-in-2022。

要注意，这里指的「快」，并不完全指的是「性能好」，而是最「敏捷」，也就是可以快速地、没有什么心智负担地新建一个项目，并可以把关注点更多地放在业务内容上。

少即是多。

这里结合一些我的看法来和大家一起看看这些工具。

工具链

Vite

Vite 是目前最快的开发服务器。基于 esbuild，它构建整个项目的速度比其他项目热更新单个模块的速度还要快！

当然，其他的开发服务器比如 webpack-dev-server 也可以通过配置实现很快的构建速度，但 Vite 几乎开箱即用。

Tailwind

一个直接将样式属性抽象成类名的库，可以让开发者的新项目快速启动，让项目快速实现各种样式，包括黑暗模式等。好处是不用每个页面或组件再多写一个 css 文件，例如：

<figure class="bg-slate-100 rounded-xl p-8 dark:bg-slate-800">
  <img
    class="w-24 h-24 rounded-full mx-auto"
    src="/sarah-dayan.jpg"
    alt=""
    width="384"
    height="512"
  />
  <div class="pt-6 space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale on large teams.
        It’s easy to customize, adapts to any design, and the build size is
        tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">Sarah Dayan</div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

但如果已经有一套比较完善的设计体系的开发者，可以使用 Emotion 这个库，有很多比较的大型项目都采用了这个方案实现 css in js：

import { css, cx } from "@emotion/css";

const color = "white";

render(
  <div
    className={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
);

pnpm

pnpm 独特的包管理方式很适合快速开发项目，比如全局缓存和硬连接。并且其对 monorepo 有天然的支持。当然这是个可选项，yarn3 和 npm8 也不差。

这里有个小经验分享：作者认为最好的包管理实践是经常更新项目依赖库，比如日更。这量第三样可以避免大方库同时升级所带来的不稳定性的问题。当然这个前提是项目拥有良好的测试覆盖率。

Eslint & Prettier

Eslint 负责规范代码语法，Prettier 负责规范代码样式。两者有一定重叠的地方，需要进行一些配置。作者给出了一些建议：

1. 为了性能，尽量不要在 Eslint 中 运行 Prettier。Prettier 可以用在日常代码保存自动格式化，Eslint 可以用在 CI 中。
2. 开启两者的 --cache 选项。
3. 为了保持项目的一致性，可以通过 @trivago/prettier-plugin-sort-imports 和 prettier-plugin-tailwindcss 调整 import 和 tailwind 类名的顺序。
4. 通过 npm-run-all 同时运行多个测试脚本，提高开发效率

Typescript

TS 距离第一次提交（2013.01.11）已经接近十年了。TS 让前端世界变得更美好，每一个新项目都应该使用 TS。感谢 TS 团队 ❤️。

浅推荐几个 Vscode 插件

1. vscode-tailwindcss：tailwind 类名提示。
2. vscode-eslint：eslint 错误提示。
3. prettier-vscode：prettier 提示。
4. errorlens：提升编辑器 error 的视觉体验。

总结

前端的发展从没有像现在一样充满挑战，也充满激情。每隔一段时间都会有改变游戏规则的工具出现，这无疑是让人兴奋的。让更多的创意的想法向我们涌来吧！