前端工具链的发展

30 阅读2分钟

构建工具

  • Vite(基于rollup/rolldown),目前最流行的构建工具
  • rsbuild(基于rspack),冷门工具
  • farm,兼容vite,而且更快……
  • mako -> utoo(基于Turbopack),目前还在开发阶段。

之所以提到mako,是因为和umijs有点关系。 image.png

评价

在三个可用的构建工具里面,rsbuild算是最冷门的。
如下图中,官方文档给出的unocss集成是有问题的,老实说你个冷门工具直接引用别人文档装装样子得了。
image.png

对于下面farm的解决的问题,其实不算什么特别大的痛点。
image.png

  • Vite是一个非常成熟的构建工具,使用farm虽然说是兼容Vite插件但是可能会有额外的复杂度
  • rsbuild不够成熟,有点赶鸭子上架的感觉

初始化一个solidjs项目。即使是farm,他还是有两个tsconfig.json,而Vite有三个,多一个tsconfig.app.json。
而rsbuild只有一个,非常轻(jian)量(lou)。
image.png

  • vite和farm默认带个index.html模板,而rsbuild中默认是隐式的模板,通过配置文件来添加head或是其他标签,这虽然增加了一些复杂度,但是少个文件我就是舒服了一点。我尝试写油猴脚本,vite中有个插件有相关功能,但是我就是不想用,于是转向rsbuild,使用脚本来手工拼接油猴脚本。

无论是哪个工具,我都没有到非常熟悉的地步,有事还是查文档。
我觉得大多数项目,Vite完全够用了,而且rolldown已经是实验性特性了,之后只会变得更快。

包管理工具

  • pnpm,目前最好用,使用最广泛的包管理工具
  • yarn,与npm兼容性较好的包管理工具
  • bun,路边一条,不适合作为包管理工具,还是让他只做个运行吧
  • npm,vscode的mcp工具好像还是用的npm,兼容性场景使用。

评价:能用pnpm用pnpm,不能的就用yarn(尤其是老项目pnpm还没出现时,不要无脑用pnpm),祖宗之法不可变就用npm。至于bun哪凉快哪待着去,包管理做得真的一般,而且build命令还被占用了,搞得每次还得多写个run。

> bun build
bun build v1.3.0 (b0a6feca)
error: Missing entrypoints. What would you like to bundle?

Usage:
  $ bun build <entrypoint> [...<entrypoints>] [...flags]

To see full documentation:
  $ bun build --help

运行时环境

  • Node,依然是应用最广泛的运行时,生态无敌
  • Bun,以速度快闻名,借助serverless小火了一把(hono,elysia)
  • deno,哪凉快哪呆着去(重视安全的场景)