2022年前端快速开发工具 - Christoph

22-10-04 banq

今年我尝试了大量的前端工具来优化我的[开发者体验](/posts/principles-of-devx)。我发布了一个令人难以置信的快速最小模板,具有合理的默认值,您可以使用它来快速启动新项目:cpojer/vite-ts-react-tailwind-template.

该模板带有用于前端开发的基本工具,具有最小的合理默认值,使其易于使用、快速入门,并适用于任何顶层框架。它针对性能进行了调整,不仅在实际速度方面,而且在编写代码时最大限度地提高您的专注时间,从而提高您的交付速度。

Vite
Vite是我用过的最好、最快的开发服务器。起初我是持怀疑态度的,但现在我不喜欢在任何没有使用Vite的前端项目上工作。通过引擎盖下的esbuild,它构建整个项目的速度比其他人热重载一个变化的速度要快。虽然其他捆绑器可以做到快速,但Vite做到了开箱即用,几乎不需要配置。

如果你还没有使用它,在一个小项目上试试,不要回头看。

Tailwind
Tailwind是另一个我最初持怀疑态度的项目。经过一年的使用,Tailwind的权衡对我来说是合理的。它将造型抽象为一个CSS变量系统,而不是直接分配CSS属性,这种方式是天才的。如果你想要合理的默认样式、智能的样式组合,以及整个项目的一致性,我推荐你使用它。它处理黑暗模式样式的方式也很好。

我们考虑了其他的选择。

  • Emotion。如果上述标准对你不适用,比如你的公司有一个明确的设计系统,或者你有高度具体的造型需求,那么就使用情感。
  • 许多其他的CSS-in-JS库。目前,Emotion是我最喜欢的一个。


pnpm
pnpm是赢得我心的JavaScript软件包管理器。它是一个快乐的工具,基本上任何与包管理或monorepos有关的东西都可以使用,它的速度很快,并且在你遇到第三方包的问题时提供了逃生通道。然而,虽然我更新了许多项目使用pnpm,并向大家推荐它,但这个模板对你所使用的包管理器没有意见。

注意:我发现,对于长期运行的项目来说,经常更新你的依赖关系是最理想的。取决于有多少自动化测试,以及项目处于哪个开发阶段,我甚至可能每天更新依赖关系。这使我能够将第三方更新中的问题隔离在较小的变化范围内,并确保我不会落后太多,使更新成为一件麻烦事。

ESLint和Prettier
ESLint和Prettier被广泛采用,你可能已经在使用它们。它们都是围绕着代码风格而服务的,表面上看,在ESLint中运行Prettier似乎是个好主意。然而,在分析ESLint在一些项目上运行缓慢的原因时,我注意到Prettier一直在占用ESLint总运行时间的50%左右。如果你在保存时格式化你的文档,那么在ESLint中同时运行Prettier是没有意义的。

对于CI或本地测试运行,我现在把prettier --cache --check .和eslint --cache .作为单独的命令并行运行。这两个项目现在都支持--缓存标志,以减少它们在本地开发时的工作量。你应该使用这些标志!

尽管有Prettier的存在,关于代码风格的争论仍然存在,比如如何对ES模块导入进行排序。手动对ES模块进行排序是很浪费时间的,而且通常会导致你在写代码时失去上下文,然后不得不浏览文件的顶部来修改你的导入语句。我喜欢使用@trivago/prettier-plugin-sort-imports插件,它可以自动对新的导入进行排序,并与TypeScript的自动导入功能完美配合。同样地,prettier-plugin-tailwindcss也会自动对你代码中的Tailwind类进行排序。

最后,我的默认ESLint配置和Prettier配置是为一致性而设计的。我对一些诸如ES模块导入的具体顺序没有意见,但我确实关心在一个项目中拥有一个一致的顺序。

npm-run-all
我喜欢在本地开发时运行所有的测试和检查。npm-run-all1将你的脚本并行化,如果有一个检查失败就立即失败,确保不会拖累你。

"scripts": {
  "build": "vite build",
  "dev": "vite dev",
  "format": "prettier --write .",
  "lint:format": "prettier --cache --check .",
  "lint": "eslint --cache .",
  "test": "npm-run-all --parallel tsc:check lint lint:format",
  "tsc:check": "tsc"
}


Node.js中的ECMAScript模块
Node.js中的ES模块(ESM)在孤立的情况下是很好的,但生态系统的整合和遗留的第三方包使ESM很难使用。我花了太多的时间试图弄清楚如何在不破坏一切的情况下用Node使用ESM,而不是用神秘的错误信息。说真的,我至少尝试了五次,但都没有成功,而且还做了一些取舍,我不愿意做。以下是我的要求。

  • 使用本地ESM。
  • 快速的JS编译。
  • 当文件发生变化时,立即重新启动脚本。



VS代码扩展
这里有四个扩展,让我在流程状态下停留的时间更长,尤其是All Autocomplete 和 Error Lens。

code --install-extension bradlc.vscode-tailwindcss
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension usernamehw.errorlens


如果你想了解更多的VS Code专业术语,我最近刚刚写了关于我最喜欢的VS Code扩展

前端开发从未像现在这样有趣。每当有人创造出改变游戏规则的工具时,我仍然感到兴奋。上面的许多工具都给我留下了深刻的印象,它们是如此的快速和令人愉快。我敢说你能给我展示更快、更好的工具
 

1