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

相关推荐
yuguo.im2 小时前
Chrome DevTools Performance 是优化前端性能的瑞士军刀
前端·javascript·性能优化·chrome devtools
FSHOW4 小时前
【独立开发日记】MQ端到端类型安全
前端·javascript·后端
chxii5 小时前
7.2elementplus的表单布局与模式
javascript·vue.js·elementui
Js_cold6 小时前
Notepad++使用技巧1
前端·javascript·fpga开发·notepad++
dreams_dream6 小时前
vue中的与,或,非
前端·javascript·vue.js
柳杉7 小时前
使用three.js搭建3d隧道监测-3
前端·javascript·three.js
lggirls9 小时前
特殊符号在Html中的代码及常用标签格式的记录
前端·javascript·html
deepdata_cn10 小时前
基于JavaScript的智能合约平台(Agoric)
javascript·区块链·智能合约
webKity11 小时前
React 的基本概念介绍
javascript·react.js
古夕11 小时前
Vue 3 复杂表单父子组件双向绑定的最佳实践
前端·javascript·vue.js