JavaScript构建工具

1、什么是 ​JavaScript 构建工具

JavaScript 构建工具​ 是用于 ​辅助开发者在开发 JavaScript 应用时,对代码进行转换、打包、优化、压缩、测试等操作的工具。

简单来说: ​JavaScript 构建工具就是帮你把"写代码"变成"能运行在生产环境中的高效代码"的工具。​

2、构建工具的作用

功能 说明
代码转换 如把 ES6 → ES5、TypeScript → JavaScript、JSX → JavaScript
模块打包 把多个模块打包成一个或多个文件,优化加载
代码压缩 压缩 JS / CSS,减小文件体积,提高加载速度
预处理器支持 支持 Sass、Less、TypeScript 等编译
静态资源处理 处理图片、字体等资源路径和优化
开发服务器 提供热更新(HMR)、本地调试服务器
代码检查 & 格式化 如 ESLint、Prettier
自动化流程 通过脚本自动完成构建、测试、部署等任务

3、主流 JavaScript 构建工具

1、Webpack

最流行、功能最全的模块打包工具

作用 ​:打包 JavaScript 模块、CSS、图片、字体等所有前端资源

特点​:

1.支持代码分割、懒加载

2.插件系统非常强大(比如 BabelLoader、CSSLoader、HtmlWebpackPlugin)

3.可打包任何静态资源

适合 ​:中大型项目、复杂前端应用

官网:webpack

2、Babel

JavaScript 编译器,用于将新语法转换为兼容旧浏览器的代码

作用 ​:将 ES6+ / TypeScript / JSX 等代码编译为浏览器兼容的 ES5 代码

特点​:

1.不是打包工具,但是构建流程中的核心工具

2.必须配合 Webpack / Vite / Rollup 等使用

适合 ​:所有需要兼容旧浏览器的项目

官网:Babel

3、Vite

新一代极速构建工具,由 Vue 团队开发,现支持所有框架

作用 ​:开发服务器 + 构建工具,基于 ES Modules,启动超快

特点​:

1.开发时无需打包,启动秒级

2.生产环境使用 Rollup 打包,性能极佳

3.配置简单,开箱即用

4.比 Webpack 简单很多

适合 ​:Vue / React / 原生 JS 项目,特别适合现代前端开发

官网:Vite | Next Generation Frontend Tooling

4、Rollup

轻量、高效的 JavaScript 模块打包器,适合库开发

作用 ​:将小模块打包为高效、优化过的代码,特别适合开发 JS 库

特点​:

1.输出代码更简洁、体积更小

2.Tree-shaking(移除未使用代码)效果更好

3.配置比 Webpack 简单

适合​:开发 JavaScript 第三方库、工具包

官网:Rollup

**5、ESBuild~**超快编译工具

极快的 JavaScript / TypeScript 打包和转译工具,由 Go 编写

作用 ​:极速编译 JS / TS / JSX,比 Babel 快 100 倍以上

特点​:

1.速度极快,但功能相对简单

2.常被 Vite / Rollup 等工具用作底层转译器

适合​:需要极速构建的项目,或作为其他工具的底层引擎

官网:esbuild - An extremely fast bundler for the web

相关推荐
徐小夕@趣谈前端8 小时前
如何实现多人协同文档编辑器
javascript·vue.js·设计模式·前端框架·开源·编辑器·github
小白呀白8 小时前
【uni-app】树形结构数据选择框
前端·javascript·uni-app
开发者小天10 小时前
uniapp中封装底部跳转方法
前端·javascript·uni-app
Restart-AHTCM13 小时前
前端核心框架vue之(路由篇3/5)
前端·javascript·vue.js
让时光到此为止。14 小时前
vue的首屏优化是怎么做的
前端·javascript·vue.js
San3014 小时前
JavaScript 流程控制与数组操作全解析:从条件判断到数据高效处理
javascript·面试·代码规范
dengzhenyue14 小时前
矩形碰撞检测
开发语言·前端·javascript
前端伪大叔15 小时前
第13篇:🎯 如何精准控制买入卖出价格?entry/exit\_pricing 实战配置
javascript·python
麦当_15 小时前
ReAct 模式在 Neovate 中的应用
前端·javascript·架构
itslife15 小时前
vite源码 - 开始
前端·javascript