世界关注：第4期 一文了解前端打包工具的发展

前言

模块打包工具用于将多个模块打包到浏览器的一个或多个优化打包中。因为浏览器文件不会被编译，且支持有限，所以在前端工作中，模块打包是非常重要的。

Grunt最早的打包工具，它运用配置的思想来写打包脚本，一切皆配置，所以会出现比较多的配置项，诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段，学习成本高，运用的时候需要明白各种插件的配置规则。Gulp用代码方式来写打包脚本，并且代码采用流式的写法，只抽象出了gulp.src, gulp.pipe, gulp.dest, gulp.watch 接口，运用相当简单。更易于学习和使用，使用gulp的代码量能比grunt少一半左右。

【资料图】

Webpack

是模块化管理工具和打包工具。通过 loader 的转换，任何形式的资源都可以视作模块，比如 Commonjs 模块、AMD 模块、ES6 模块、css、图片等。他的宗旨是一切静态资源皆可打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。当webpack处理您的应用程序时，它会在内部构建一个依赖关系图，映射项目所需的每个模块，并生成一个或多个捆绑包。它支持所有流行的模块选项，并已成为React开发的代名词。虽然Webpack声称是一个模块捆绑程序，但是已经可以用作通用任务运行程序了。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。它定位是模块打包器，而 Gulp/Grunt 属于构建工具。Webpack 可以代替 Gulp/Grunt 的一些功能，但不是一个职能的工具，可以配合使用。

Rollup下一代 ES6 模块化工具，最大的亮点是利用 ES6 模块设计，利用 tree-shaking生成更简洁、更简单的代码。一般而言，对于应用使用 Webpack，对于类库使用 Rollup；需要代码拆分(Code Splitting)，或者很多静态资源需要处理，再或者构建的项目需要引入很多 Commonjs 模块的依赖时，使用 webpack。代码库是基于 ES6 模块，而且希望代码能够被其他人直接使用，使用 Rollup。

Parcel

Parcel是一款“速度极快、零配置的web应用程序打包器”。有以下这些特点：很快、捆绑项目的所有资产、没有配置代码拆分。

browserifyBrowserify支持Node.js正在使用的CommonJS模块，它将所有模块编译成单个浏览器兼容的文件。它是基于流式思想设计，可以通过command line，也可以通过API来使用。仅处理javascript模块化的逆过程，但是推动着模块化的更好发展。RequireJSRequireJS是一个JavaScript文件和模块加载器。它针对浏览器内使用进行了优化，但可以在其他JavaScript环境中使用，例如Rhino和Node。使用像RequireJS这样的模块化脚本加载器将提高代码的速度和质量

Esbuild

esbuild一个基于Go语言开发的JavaScript Bundler。它的构建速度是 webpack 的几十倍。

SWCswc: 是一个用 Rust 写的高性能 TypeScript / JavaScript 转译器，类似于 babel。

Vite

vite是下一代前端开发与构建工具。[1]Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

关键词： 应用程序 一般而言