莫方教程网

专业程序员编程教程与实战案例分享

2025年02月19日

2023年前端构建工具大全_前端搭建

大家好，我是Echa。

工欲善其事，必先利其器。想要在春招中过五关斩六将，前端基础知识掌握的不扎实可不行。

做全栈工程师数一数也有8年多时间了，前端从最早的 jQuery 时代到现在流行的三大框架：React、Vue、Angular。这整个过程中用到了很多构建工具，你们用到过哪些前端构建工具呢？欢迎在评论区留言讨论。

说到构建工具，我们往往会在前面加「自动化」三个字，因为构建工具就是用来让我们不再做机械重复的事情，解放我们的双手的。

其实，构建工具,说白了就是帮助我们通过配置或者编写约定好的代码,来自动完成上面的这些功能的一个工具。对于需要反复重复的任务，例如压缩、编译、单元测试、linting等，自动化工具可以减轻我们的劳动，简化我们的工作。

今天小编给大家详细介绍2023年前端构建工具有哪些，希望给大家前端学习有所帮助。介绍之前，我们先聊聊现在前端开发的痛点，也是这些构建工具出现的原因：

  • 开发过程注重速度、配置复杂度
  • 线上部署注重体积

全文大纲

  1. Webpack
  2. Vite
  3. Gulp
  4. Browserify
  5. Rollup
  6. Esbuild
  7. Snowpack
  8. Parcel
  9. Yeoman
  10. Grunt
  11. Babel
  12. FIS3
  13. swc
  14. tsc
  15. Rspack

Webpack

官网：http://webpack.js.org/

Github：https://github.com/webpack/webpack

介绍

Webpack=Web Package，Webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）

模块（模块化开发，可以提高开发效率，避免重复造轮子）

打包（将各个模块，按照一定的规则组装起来）

通过如下图所示我们要做一道菜，菜的名字是西红柿炒蛋，我们的模块就相当于我们做这道菜的食材，每一个食材都是我们的一个模块，那么这每一个模块都是现成的模块，直接拿来使用，比如说鸡蛋，不可能我们要使用鸡蛋食材，非得要我们去自己养鸡，然后等鸡下蛋后我们才能用到，其实我们在超市中都可以直接买到现成的食材，所以这些模块都是我们提前定义好的，我们直接拿来使用即可，那么我们通过食材怎么样做成西红柿炒蛋这份菜呢？是不是要通过锅去炒食材呀，那么好了，我们炒菜的这个锅就可以当成一个工具，用来实现最终我们想要的结果，生产代码，这款工具就叫做webpack。

通过将多个模块，使用打包工具进行编译、格式化校验、压缩最后打包成一个模块文件，成为最终目标文件，然后上线。具体如下图：








Vite

官网： https://vitejs.cn/

Github： https://github.com/vitejs/vite

介绍

一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。

目前，Vite已经发布了Vite4，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。

优势分析

  • Vite 主要对应的场景是开发模式，跳过打包按需加载，因此热更新的速度非常快；
  • 在大型项目上可以有效提高本地开发编译打包的速度，解决 “改一行代码等半天” 问题；
  • 浏览器解析 imports，利用了 type="module" 功能，然后拦截浏览器发出的 ES imports 请求并做相应处理；
  • 闪电般的冷启动速度
  • 即时热模块更换（热更新）

真正的按需编译

总的来说，Vite希望提供开箱即用的配置，同时它的插件API和JavaScript API带来了高度的可扩展性。不过，相比Vue-cli配置来说，Vite构建的项目还是有很多的配置需要开发者自己进行处理

如下图：


Gulp

官网： https://gulpjs.com/

Github： https://github.com/gulpjs/gulp

介绍

Gulp是一个基于流的自动化构建工具。除了可以管理和执行任务，还支持监听文件、读写文件。gulp被设计的非常简单，只通过下面5种方法就可以支持几乎所有构建场景。

其实平常开发就能明显感觉到，现在这个时代，webpack 比 gulp 使用的频率更高了，但其实并不是 webpack 比 gulp 厉害，而是他们偏向的应用场景不一样，gulp 更偏向将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间。而webpack 更侧重于模块化打包，也就是官网的那张图，将所有依赖的 js、less、png 等等打包为最终需要的模块。

所以在 jQuery 的时代，更多的是用 gulp，做代码压缩之类的事情。

在现在的 SPA 单页面应用的时代，更多使用 webpack，对不同的模块进行打包，并且通过 plugin 也能实现压缩等功能。

如下图：



Browserify

官网： https://browserify.org/

Github： https://github.com/browserify/browserify

介绍

Browserify是一个编译工具，是目前比较流行的模块打包工具之一(另外一个是webpack)，browserify 是基于流式思想设计；可以通过命令行，也可以通过API来使用，是模块化的逆过程，但是推动模块化的快速发展，它可以使用类似于node的require()的方式来组织浏览器端的JavaScript代码，通过预编译可以让前端的JavaScript直接使用npm安装一些库。

总体过程可以分为两个部分：预编译阶段和执行阶段

预编译阶段

  • 1.从入口模块开始，分析代码中 require 函数的调用
  • 2.生成AST
  • 3.根据AST找到每个模块require的模块名
  • 4.得到每个模块的依赖关系
  • 5.包装每个模块,生成用于执行的

执行阶段

从入口模块开始执行，递归执行所有的require的模块，得到依赖对象

如下图：

Rollup

官网： https://rollupjs.org/

Github： https://github.com/rollup/rollup

介绍

Rollup 是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同，Rollup 使用的是 ES6 版本 Javascript 中的模块标准。新的 ES 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数。这一特性在未来将随处可用，但 Rollup 让你现在就可以，想用就用。

如下图：


Esbuild

官网：
https://esbuild.docschina.org/

Github： https://github.com/evanw/esbuild

介绍

esbuild 是一个快速的 JavaScript 打包器，主要目标是带来构建工具性能的新时代，并在此过程中创建易于使用的现代捆绑器。

esbuild 是一个用 Go 编写的快速而简单的 JavaScript 捆绑包，目前 web 构建工具的速度大约是上述工具的 10 - 100 倍。 esbuild 构建工具的核心目标是开创构建工具性能的新时代， 同时创建一个易于使用的现代构建工具。

其主要特点有：

  • 极快的速度，无需缓存
  • 支持 ES6 和 CommonJS 模块
  • 支持 ES6 模块进行 tree shaking
  • API 可同时用于 JavaScript 和 Go
  • 兼容 TypeScript 和 JSX 语法
  • 支持 Source maps
  • 支持 Minification
  • 支持 plugins

如下图：

Snowpack

官网： https://www.snowpack.dev/

Github： https://github.com/FredKSchott/snowpack

介绍

Snowpack是用于Web应用程序开发的现代轻量级工具链,可以对标 webpack, 像 webpack 这样的工具每次更新都会重新构建部分或全部代码,这就是他的不足之处了

Snowpack 每当更改文件时，都不会重建多个文件。没有捆绑可言，只有几毫秒的单文件重建，然后通过HMR在浏览器中进行即时更新

snowpack 的主要优点及支持

  • 在50毫秒或更短时间内启动的开发环境。
  • 更改会立即反映在浏览器中。
  • 对TypeScript，JSX，CSS模块等的现成支持。

支持 react 和 Vue

工具支持
Babel,TypeScript,PostCSS,Sass

唯一的要求是在开发过程中，您必须使用现代的浏览器。 Firefox，Chrome或Edge的任何最新版本都可以。这是支持现代无捆绑ESM导入所必需的，该导入将您的应用程序加载到浏览器中。

如下图：


Parcel

官网： https://parceljs.org/

Github： https://github.com/parcel-bundler/parcel

介绍

极速零配置Web应用打包工具，Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存，即使在重启构建后也能快速再编译。

如下图：



Yeoman

官网： https://yeoman.io/

Github： https://github.com/yeoman/yeoman

介绍

Yeoman是一个强健的工具，库，及工作流程的组合，帮你网页开发者快速创建出漂亮而且引人入胜的网页程序。

如下图：


Grunt

官网： https://www.gruntjs.net/

Github： https://github.com/gruntjs/

介绍

Grunt和Npm Script类似，也是一个任务执行者。Grunt有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系。

Grunt 生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用 Grunt 自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个 Grunt 插件

如下图：


Babel

官网： https://babeljs.io/

Github： https://github.com/babel/babel

介绍


babel是一个编译器，用于将ECMA2015+代码转换为向后兼容的javascript语法，其原因在于目前浏览器并不能及时的兼容js的新语法，而开发过程中我们往往会选择es6、jsx、typescript进行开发，而浏览器并不能识别并执行这些代码，因此就必须将这些代码编译并转换成浏览器识别的代码，所以我们才会发现所有的项目构建工具都是使用babel，这就显示出来babel的重要性。虽然经常使用，但是每次使用都是使用固定的配置代码，却没有了解其执行原理。知其然就需要知其所以然，所以记下自己对于babel的理解。

如下图：


FIS3

官网：
https://fex-team.github.io/fis3/

Github： https://github.com/fex-team

介绍

FIS3, 为你定制的前端工程构建工具。解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题。

Fis3是来自百度的国产构建工具，相对于grunt，gulp这些只提供了基本功能的工具，Fis3集成了web开发中常用的构建功能。

如下图：

swc

官网： https://swc.rs/

Github： https://github.com/swc-project/swc

介绍

SWC是一种类似zip的文件（通过 PKZIP 归档格式打包和展开），它由Flash编译工具compc生成。

通过compc 可以将一些class文件 一些图片 以及一些.css的样式文件等 打包到.swc文件中。从 Flash 环境生成 SWC 文件后，可以选择在 SWC 文件中包含其它文件。例如，您可能需要包含 Read Me 文件，如果需要用户访问组件的源代码，可能还需要包含 FLA 文件。若要添加其它文件，请使用 Macromedia Extension Manager

  • SWC 文件展开到单个目录中，因此每个组件必须具有唯一的文件名，以免发生冲突。
  • 在Flex开发中通常用SWC文件来导入Java或者.Net已经编译好的WebService包，来实现Flex的数据库访问。
  • SWC: S-STEEL; W-WIRE; C-CARBON 即碳素弹簧钢丝，JIS标准
  • SWC是数字式温度传感器的

如下图：

tsc

官网：
https://www.typescriptlang.org/

Github： https://github.com/microsoft/TypeScript/#readme

介绍

TypeScript 是 JavaScript 的超集。

TypeScript 建立在 JavaScript 之上。首先，我们编写 TypeScript 代码。然后，我们使用 TypeScript 编译器将 TypeScript 代码编译为纯 JavaScript 代码。

拥有纯 JavaScript 代码后，我们可以将其部署到 JavaScript 运行的任何环境中。

TypeScript 文件的扩展是 .ts ，而不是 JavaScript 文件的 .js 扩展名。

TypeScript 使用 JavaScript 语法，并添加了额外的语法来支持类型。

如下图：

Rspack

官网： https://www.rspack.dev/

Github： https://github.com/web-infra-dev/rspack

介绍


字节跳动开源了一款采用 Rust 开发的前端模块打包工具：Rspack（读音为 /'ɑrsp?k/）。

Rspack 是由 ByteDance Web Infra 团队孵化的基于 Rust 语言开发的 Bundler，拥有高性能、兼容 Webpack 生态、定制性强等多种优点，它解决了我们在业务场景中遇到的非常多的问题，让很多开发者的体验有了质的提升。

官方创建 Rspack 的原因是要解决在 ByteDance 维护构建工具时遇到的各种性能问题。由于 ByteDance 内部存在许多巨石应用，它们都具有复杂的构建配置，生产环境构建需要耗费十几分钟，甚至超过半小时；开发环境的耗时也超过十几分钟。

官方在 Webpack 上尝试了多种方法来优化这些巨石应用，但是效果甚微。我们意识到在 Webpack 上的优化已经难以为继，必须要从底层改造，才能适应我们的需求。

如下图：


最后

一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。

标签：前端打包工具有哪些 

作者:mofang723 , 分类:技术文章 , 浏览:16 , 评论:0

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言