Sekyoro的博客小屋
·
前端运行时、打包与构建简单介绍
💡
原文中文，约5000字，阅读约需12分钟。
📝
内容提要
今年前端工具进展缓慢，但仍有新工具和版本更新。主要运行时包括Node、Bun和Deno，后者支持新特性。打包工具如esbuild、Parcel和Rollup各具优势，Webpack和Vite等构建工具也在使用中。Babel和SWC用于代码转译，提高兼容性和性能。
🎯
关键要点
- 今年前端工具进展缓慢，但仍有新工具和版本更新。
- 主要运行时包括Node、Bun和Deno，Deno支持新特性。
- Bun致力于打造整个开发生态，而不仅仅是一个运行时。
- 常用的包管理器有npm、yarn、pnpm，以及Bun和Corepack。
- 打包工具的主要目标是将JavaScript、CSS等文件打包在一起。
- esbuild以速度快著称，支持js、css、ts、jsx。
- Parcel功能更多，支持commonjs和ES模块的输出。
- Rollup适合ES模块编写的js打包，使用简洁方便。
- Vite是目前使用的打包工具，支持许多预设和插件。
- 构建工具如webpack功能强大，但配置复杂，Vite使用更广泛。
- Babel用于ES2015+的兼容性，支持jsx和es模块转换。
- SWC是Vite中使用的代码转换器，支持配置和压缩。
- Oxc属于Vue和Vite生态圈，提供多种工具。
❓
延伸问答
今年前端工具的进展如何？
今年前端工具的进展相对较慢，但仍有新工具和版本更新。
Deno和Bun的主要优点是什么？
Deno和Bun的优点在于速度和对新特性的支持，尤其是对TypeScript的支持更快。
esbuild与Parcel的主要区别是什么？
esbuild以速度快著称，支持js、css、ts、jsx，而Parcel功能更多，支持commonjs和ES模块的输出。
Vite和Webpack的主要区别是什么？
Vite使用更广泛，开箱即用，支持许多预设，而Webpack功能强大但配置复杂。
Babel的主要功能是什么？
Babel用于ES2015+的兼容性，支持jsx和ES模块转换。
SWC在Vite中的作用是什么？
SWC是Vite中使用的代码转换器，支持配置和压缩。
➡️
