Day1【专栏概述】前端工具链-前端工具、构建工具、脚手架

首先我们这边来确定几个概念：

• 前端工具
• 构建工具
• 脚手架

前端工具

一说到前端工具，那么这个工具的数量是非常非常多的，每一个工具实际上都是在致力于做一件事情。

本门课程我们主要聚焦于介绍和 JS 相关的工具，下面罗列了一些常见的工具：

1. Prettier ：Prettier 是一个代码格式化工具，用于自动格式化 JavaScript、TypeScript、CSS、HTML 等文件。Prettier 可以确保团队遵循一致的代码风格，从而提高代码的可读性和维护性。

2. ESLint ：ESLint 是一个静态代码分析工具，用于检查 JavaScript 和 TypeScript 代码中的潜在问题和编码规范。ESLint 通过可配置的规则来检查代码，并可以与 Prettier 结合使用，以确保代码质量和风格的一致性。

3. Babel ：Babel 是一个 JavaScript 编译器，用于将新版 JavaScript （如 ES6+ ）转换为兼容旧版浏览器的代码。Babel 支持插件系统，可以进行语法转换、优化和其他代码转换任务。

4. Terser ：Terser 是一个 JavaScript 压缩器，用于移除无用的代码、空格和注释，从而减小代码的文件大小。Terser 支持 ES6+ 语法，并可以用于压缩和优化生产环境的 JavaScript 代码。

像上面所罗列的这些东西就是前端开发中常用的工具，这些工具一般是在 部署上线 之前会使用，而且很明显的可以看到，一个工具就是负责做一些事情。另外就是上面所罗列的仅仅是前端中最最最常用的工具，工具本身的数量是非常非常多的，取决于你要做的事情，你要做的事情越多，那么自然你用到的工具也就越多。

构建工具

现在我们有了一堆工具，每个工具负责做一件事情，那么我们在部署上线之前，会做的一件事情就是将项目代码先交给工具 A 进行处理，处理完成后拿到处理结果交给工具 B 进行第二次处理，之后交给工具 C、D、E、F... 每一次使用下一个工具的时候需要基于上一个工具的处理结果。

此时你就会发现这种方式非常非常繁琐，而且一旦我们对项目的代码有改动，那么上面的流程全部重新走一遍。

因此我们期望有一个工具能够帮助我们自动化完成从工具 A 到工具 Z 的处理工作，我们将从工具 A 到工具 Z 的处理工作称之为构建，对应的工具称之为构建工具。

构建工具顾名思义就是构建部署上线之前的代码，通过构建工具，可以将从工具A到工具Z的处理工作自动的跑一遍。

下面介绍一些常见的构建工具：

• Grunt ：Grunt 是一个任务运行器，它使用基于配置的方法来定义任务。Grunt 有丰富的插件生态系统，可以执行各种前端构建任务。
• Gulp ：Gulp 是一个基于流的任务运行器，它允许开发者编写简洁的任务来处理文件。Gulp 使用插件系统处理各种任务，如编译 Sass、压缩图片、合并文件等。
• Webpack ：Webpack 是一个非常流行的模块打包器，它可以处理 JavaScript、CSS、HTML 和其他文件类型。Webpack 提供了许多插件和加载器，以便在打包过程中执行各种任务，如压缩、转换、热替换等。
• Parcel ：Parcel 是一个零配置的 Web 应用打包器，它提供了快速的构建性能和自动代码拆分。Parcel 支持多种文件类型，并且可以自动处理模块热替换和资源优化。
• Rollup ：Rollup 是一个 JavaScript 模块打包器，专注于生成高效的 ES6 模块。Rollup 支持插件系统，可以处理各种任务，如编译、压缩、处理 CSS 等。
• esbuild ：esbuild 是一个极速的 JavaScript 打包器和压缩器，它使用 Go 语言编写，并利用了 Go 的并发特性来实现高速构建。esbuild 提供了一种简单易用的方式来打包 JavaScript、TypeScript 和 JSX 代码。它还支持 CSS、JSON 和其他文件类型的导入。esbuild 的目标是实现最小的配置和最快的构建速度，因此它可能不像其他构建工具那样具有丰富的插件生态系统。

构建工具和前端工具之间的关系如下图所示：

以前的众多工具之间会形成一个链条，但是需要我们手动进行操作，而有了构建工具之后，这种工具链的操作就变成自动化的了。

脚手架

实际上脚手架的主要工作是负责搭建项目的整体框架。

假设没有脚手架这个东西，现在我们要从一个空目录开始搭建项目，那么我们需要做一些什么：

• 安装各种依赖
• 对一些工具进行相应的配置
• 确定项目整体的目录结构

就是上面那么一些事情，我们可能就会面临：

• 你所搭建的项目结构并非最佳实践
• 需要研究各种工具的配置
• 在搭建项目上面花费大量的时间

脚手架的出现主要就是帮助我们解决上述的问题。脚手架也是一种自动化的工具，主要是帮助我们自动化的搭建项目结构、配置文件和项目基础代码。使用脚手架，可以帮助我们快速的搭建项目，让我们可以以最快的速度进入到编写业务代码的阶段。

下面是一些关于脚手架的优点：

1. 快速启动：脚手架可以快速生成项目的基本结构和文件，让开发者无需从头开始搭建项目。这可以节省大量时间，让开发者能够更快地进入开发阶段。

2. 最佳实践：脚手架通常包含了某个技术栈或框架的最佳实践，这可以帮助开发者遵循良好的编码规范和项目结构。这有助于提高项目的可维护性和可扩展性。

3. 统一团队标准：使用脚手架可以确保整个团队遵循相同的项目结构和编码规范。这对于团队协作和代码审查非常有帮助，可以提高团队的工作效率。

4. 减少配置错误：脚手架通常包含了预先配置好的开发环境、构建工具和自动化任务。这可以减少手动配置过程中产生的错误，提高开发和部署的稳定性。

5. 易于更新和维护：许多脚手架提供了更新和升级功能，开发者可以通过简单的命令来更新项目的依赖和配置。这可以确保项目始终使用最新的技术和最佳实践。

6. 插件和扩展支持：许多脚手架支持插件系统，开发者可以根据需要添加额外的功能和工具。这可以帮助开发者定制项目的开发环境，以满足特定的需求。

现在你就应该能够明白构建工具是构建工具，脚手架是脚手架，两者虽然都是自动化工具，但是两者做的事情是不一样的。脚手架负责的是自动化的搭建开发环境下的项目结构，构建工具是负责自动化的运行工具链任务，打包成最终能够部署上线的项目代码。

同学们之所以容易混淆这两个概念，原因往往也是因为现代的脚手架在搭建项目的时候就已经把构建工具就包含进去。

常见的脚手架有：

1. vue-cli ：vue-cli 是 Vue.js 官方提供的一种命令行工具，用于快速生成 Vue.js 项目。它提供了一个带有预配置的开发环境，包括构建系统（基于 webpack 或 Vite ）、代码检查（ESLint ）、单元测试（Jest 或 Mocha ）等。vue-cli 还支持插件系统，允许开发者添加额外的功能，例如 Vuex （状态管理）、Vue Router （路由）等。vue-cli 通过可视化的 Web 界面，让开发者可以轻松地管理项目和插件。

2. create-react-app ：create-react-app 是 React 官方提供的一种脚手架，用于快速创建基于 React 的单页应用（SPA ）。create-react-app 为开发者提供了一个预配置的开发环境，包括热重载、构建优化、代码检查（ESLint ）等。create-react-app 的目标是让开发者无需关注配置，而可以专注于编写 React 代码。需要注意的是，create-react-app 对于配置的自定义性较低，如果需要高度自定义配置，可以选择其他的技术，例如 Next.js 或 Gatsby。

3. Vite ：Vite 是一种新型的构建工具和脚手架，由 Vue.js 的作者尤雨溪创建。Vite 使用原生的 ES modules 特性，实现了极快的开发服务器和构建性能。Vite 支持 Vue.js、React、Preact 等多种框架，并提供了一套预配置的开发环境，包括热模块替换（HMR ）、CSS 预处理器、代码检查（ESLint ）等。Vite 还支持插件系统，可以轻松地扩展功能和集成其他工具。

4. Angular CLI ：Angular CLI 是 Angular 官方提供的脚手架，用于创建、开发和部署 Angular 应用。它提供了一个预配置的开发环境，包括构建系统（基于 webpack ）、代码检查（TSLint ）、单元测试（Karma 或 Jest ）等。Angular CLI 还支持插件系统，可以轻松地添加额外功能，如 Angular Material （UI 库）等。

学习此专栏，你可以收获什么

这一门我们主要聚焦到"前端工具"，介绍一些前端最最最常用的工具：

• prettier
• ESLint
• Babel
• 其他工具