前端常用的构建工具

前端常用的构建工具

1. 什么是构建工具

• 构建工具帮助我们自动化处理一系列重复的工作，提高开发效率和代码质量

1. webpack

• webpack是目前最流行的构建工具，我个人认为没有之一，就是最，适用于构建各种复杂的前端应用。
• 关于webpack，之前有一列的文章讲过，
• webpack基本使用
• 文大白话讲清楚webpack基本使用——1——完成webpack的初步构建
• 一直到
• 一文大白话讲清楚webpack基本使用——18——HappyPack
• webpack进阶
• 一文大白话讲清楚webpack进阶——11——webpack proxy工作原理
• 一直到
• 一文大白话讲清楚webpack进阶——1——SourceMap

2. Gulp

• Gulp是一个基于Stream流的自动化构建工具，他的核心是Task，开发者可以通过编写插件来定义不同的任务，并将这些任务按照特定的顺序组合起来执行
• 当然，Gulp自身提供了大量的插件，可以用于执行各种任务，例如文件压缩 ，文件合并等
• 此外，Gulp支持实时监控文件变化，并自动执行相关任务，便于实时预览和调试

3. Grunt

• 基于配置的自动化构建工具，核心也是Task，基本理念和用法跟Gulp非常相似
• 总的来说，webpack主要用于模块打包盒资源管理，而Gulp和Grunt主要用于任务执行和自动化构建

4. Vite

• 由VUE团队开发的构建工具，如果你使用VUE3开发项目，那Vite是不二首选的构建工具
• Vite相比webpack有更快的打包速度。VIte将应用分为依赖和源码两类，改进了开发服务器的启动时间。Vite会瞬间开启一个服务，不会预先编译所有文件，而是等到浏览器需要用到某个文件时，Vite再去请求、编译并响应到客户端
• 而webpack会将所有的文件都打包编译，导致处理的时间拉长

5. Babel

• 万能编译器，一句话，他能把很多新特性，或者非js代码，转换成兼容性良好的JS代码
• 比如把ES6新特性转换为ES5
• 把JSX转换为jS
• 把typescript转换为JS
• 等等

6. ESLint和StyleLint

• 一个对惊呆JS代码进行分析，一个对CSS代码进行静态分析