前端打包工具大乱斗

背景和痛点

过去很长一段时间，人们使用 webpack，或基于 webpack（taro）的插件系统，构建复杂应用

随着项目复杂度的升高，一层层 loader 和 plugin，将开发链路大大延长

过长的开发链路，除了打包时间变慢，更重要的是严重影响力调试，测试，维护

除此之外，case by case 的 AST 转译方式，擅自扭曲语法语义，也是很不地道的行为

从去年开始大家开始意识到这个问题，开始制造链路更短，开发体验更好的打包工具，前端进入打包工具大乱斗的 2021 年

第一类：vite/snowpack/wmr

其中一类是基于 native module 机制开发 bundless 工具，比如 vite，snowpack，wmr

其中 vite 的作者是知名前端框架 vue 的作者，wmr 的作者则是 preact 团队

https://github.com/vitejs/vite

https://github.com/snowpackjs/snowpack

https://github.com/preactjs/wmr

这类工具的机制是一模一样的，本质上是一个 dev server，面向的目标群体是现代 web 应用，比较重要的是对 ssr 的实现

svelte/roolup 作者开源一种 native module 跑到 node 的思路，被 vite，snowpack 所使用

https://github.com/sveltejs/kit

因为 ssr 同构是必须将 native module 跑到 node 端的

与此同时，这类框架还需要借助 rollup 或 esbuild 进行打包和预处理

所以与其说他们是打包工具，不如说他们是不依赖 webpack 的构建工具

第二类：wepack/metro

前面的第一类工具主要是针对现代浏览器，而非 web 平台，也有对应的替代方案

比如 metro 是专门用来打包 RN 的，它的作者是 facebook 官方，未来会成为 RN 的标配

https://github.com/facebook/metro

wepack 是专门用来打包微信小程序的，它的作者是 fre 作者 132

https://github.com/ctripcorp/wepack

这一类工具的共同特点是，他们都是因为非 web 平台产生，并服务于这特定场景

因为 js 不再是一等公民，通常这类工具无法使用 rollup，esbuild 等工具

但无论如何目的都是一样的——抛弃 webpack

第三类：esbuild/swr

第三类工具则以 esbuild 为代表，它的作者是大名鼎鼎的 figma CTO

https://github.com/evanw/esbuild

这类工具通常使用非 js 语言，利用其他语言的天赋来提升编译速度

比如前面提到的 vite 就使用 esbuild 进行预编译

总结

工具众多，大家除了根据自己的业务尝试新型框架，更重要的是理解这些框架的内在

另外，对于公司而言，历史包袱先于新业务，铲平一座 shi 山的意义远大于开始一个新项目

所以这些工具其实都不是对标历史债务的

该自己扛的，还得自己扛