前端构建方案选择

前言

每次开发新项目的时候， 都要选择一下用什么脚手架。背后其实也是一套工程化构建方案的选择。

项目类型

首先还是确认项目的类型, 是开发一个网站， 还是 cli 工具，还是 npm 包，还是 node 服务端开发，亦或是 electron 开发。 如果是网站项目，是前端 CSR 应用，还是服务端渲染的 SSR 应用, 或者是重视 SEO 的 SSG。 再细致的了解站点属性，是 langding page（主要靠样式调整）, 还是文档站点（基于 md 文件生成， 重视检索，目录结构），还是具有功能性的（比如富文本编辑器，图表，地图，视频等）。 还需要考虑运行环境， 是否支持原生 es module, 决定是否需要模块打包工具。 最后，看 ts 编译的方式， 是选择 babel, SWC 还是 esbuild.

常见的脚手架

一般脚手架的带了构建方案的，所以使我们选择的一个好的入口。

  • SSR:next.js
  • SSG：Astro，Gasby，各种文档工具（支持 mdx， 方便扩展 react 组件）
  • CSR: vite, create-react-app

我们也看看组件库推荐结合的用例：

综合看构建方案

如果目标环境不支持 esbuild 的话， vite 和 webpack 还是最常用的构建方案。但随着 esm 的发展， 原来越多的环境原生支持了 esm 模块方案，就不需要打包工具处理模块加载了，web 应用中，构建工具，还是会处理资源的加载，比如 svg, 图片啥的。

next.js

自带的基于 swc 的工具

webpack

CRA 就是使用的这个， 最传统的构建方案， 字节基于 webpack 做了一个 rspack，对 webpack 配置做了兼容。

没啥好说的，就是配置比较复杂，但是功能强大，插件多，社区活跃。

vite

特点是开发环境下，使用 esm, 不需要打包， 构建速度快， 但是生产环境下，还是需要打包的， 基于 rollup, 代码编译的工具，使用的是 esbuild.

开发环境下

默认使用的是 vite-plugin-react/packages/plugin-react at main · vitejs/vite-plugin-react, 在开发环境用的 babel, 构建使用的 esbuild, 我们可以替换成 swc 的构建：vitejs/vite-plugin-react-swc: Speed up your Vite dev server with SWC。当开发环境有更好的热更新能力。

生产环境下

vite 构建的时候，使用的 esbuild + rollup, 所以配置上要有点区分。

esm

npm 包的开发， 现在都推荐使用 esm 了， package.json 中就通过 type: 'module' 声明了。或者是 cli 类型的工具， node 也能直接运行 esm 了。最近 electron@28 也支持 esm 了。

这种情况下，代码的编译，主要就可以是 tsc -b 完成了。但是需要注意的是对 alias 的处理， 因为不是构建工具， 所以不会做这个替换， 我们要么是在运行的时候，添加 dividab/tsconfig-paths: Load node modules according to tsconfig paths, in run-time or via API.。 要么是后置字符替换， 使用 justkey007/tsc-alias: Replace alias paths with relative paths after typescript compilation

缺点：

  • 限制了不能混用不同的模块规范， 比如不能混用 cjs 和 esm， 对于第三方的 npm 包有要求。

技术总结

服务端渲染的项目， 直接 next.js, 客户端类型项目， vite 优先， SSG 的话， astro 试试？ 然后保持对 rspack 的发展关注。