一文彻底搞懂前端脚手架与构建工具

我们在做vue新项目开发时，第一步会执行命令 npm init vue@latest。这时会弹出一些预设选项给我们选择，完了后会生成一堆项目文件，接着我们导入项目技术栈相应依赖，配置项目，然后开始开发。

命令 npm init vue@latest 具体帮我们做了什么呢？首先会安装和执行create-vue, 它是vue官方提供的脚手架工具。在这款脚手架工具中内置了vite构建工具。如果你使用的是vue-cli脚手架，它里面内置的是webpack构建工具。跟着命令行的提示继续操作，完了后就会生成如下的目录文件结构。

create-vue脚手架包含vite构建工具，什么是脚手架什么是构建工具它们各自有什么作用呢？

—

脚手架

前端脚手架（Scaffolding）是一种自动化工具，它可以帮助开发者快速搭建项目的基础结构，从而节省时间并减少重复性工作。在前端开发中，脚手架工具通常用于生成项目模板、配置文件、目录结构等。

以下是一些流行的前端脚手架工具：

Create React App: 这是React官方提供的脚手架工具，可以快速生成一个React应用的基础结构。
Create-vue：这是Vue官方提供脚手架工具，可以快速生成Vue应用基础结构。
Vue CLI: Vue.js的官方脚手架工具，用于快速搭建Vue.js项目。
Angular CLI: Angular的官方脚手架工具，用于快速创建和管理Angular项目。

使用这些脚手架工具时，你通常需要安装相应的命令行接口（CLI），然后运行一些命令来创建新项目或添加新功能。例如，使用Create React App创建新项目，你可以运行以下命令：

npx create-react-app my-appcd my-appnpm start

这些命令会创建一个名为my-app的新React项目，并启动开发服务器。

脚手架工具的选择取决于你使用的前端框架或库，以及你的项目需求。使用脚手架可以大大加快开发速度，让你专注于编写业务逻辑代码，而不是项目的基础设置。

—

构建工具

构建工具是前端开发中不可或缺的一部分，它们用于自动化前端项目的构建过程，包括编译、打包、压缩、优化和部署等任务。以下是一些流行的前端构建工具：

Webpack: 一个现代JavaScript应用程序的静态模块打包器，它可以将项目中的所有依赖项和模块打包成一个或多个bundle。
Rollup: 一个模块打包器，专注于生成库文件，特别是用于构建JavaScript库。
Gulp: 一个自动化构建系统，使用代码而非配置来定义任务，可以执行多种任务，如压缩、合并、编译等。
Grunt: 类似于Gulp，Grunt是一个JavaScript任务运行器，通过配置文件来定义任务。
Parcel: 一个零配置的Web应用打包器，它提供了快速的开发服务器和热模块替换功能。
Browserify: 一个工具，允许在浏览器中使用Node.js模块，可以将多个模块打包成一个文件。
Esbuild: 一个非常快速的打包器，由Go语言编写，专注于提供快速的构建速度。
Vite: 由Vue团队成员开发的构建工具，它利用原生ES模块导入（ESM）提供丰富的开发体验和生产优化。

这些构建工具通常具有以下功能：

编译: 将源代码编译成浏览器可以理解的格式。
打包: 将多个文件合并成一个或多个bundle。
压缩: 减小文件大小，提高加载速度。
优化: 优化代码，提高运行效率。
热模块替换: 在开发过程中，替换模块而不重新加载整个页面。
代码分割: 按需加载代码，减少初始加载时间。
依赖管理: 管理和解析项目依赖。

选择合适的构建工具取决于你的项目需求、使用的框架或库以及个人偏好。构建工具可以显著提高开发效率，减少手动操作，确保代码质量和性能。

—

脚手架和构建工具区别

脚手架和构建工具主要区别是:

目的: 脚手架工具的目的在于自动生成一套完整的项目结构和配置文件，简化项目的初始设置。构建工具则聚焦于源代码的处理，包括编译、打包、优化等。
使用时间点: 脚手架工具通常在项目开发之初使用一次，而构建工具则会在开发的整个生命周期中反复使用。

—

我理解的构建工具

上面是构建工具比较官方的介绍。对于构建工具我们从另一个角度来理解。

大家都知道浏览器只支持 Html、CSS、JavaScript，但一个企业级项目可能会用到各种各样的前端技术，如Sass、TS、Vue组件、语法降级、体积优化等，这时候我们就需要相应的工具去处理这些内容，将其转换成浏览器能识别的html、css、javascript。

使用 less-loader/sass-loader 处理less/sass
使用 tsc 将typescript 转换为 javascript
使用vue-complier 将vue 组件模板转换为 render 函数使用。
使用 babe1 将 es 的新语法转换为旧版浏览器认识的语法。
使用uglifyjs将我们的代码压缩成体积更小的文件

我们可以手动把代码挨个处理一遍，但这样效率非常低，当我们稍微修改一点代码，这个流程又要重新走一遍，非常麻烦。有个神奇的东西，可以把以上工具集成到一起，整个流程交给它自动处理。而且当代码发生变化时，自动帮我们重新走一遍，这个东西就叫做构建工具。当然构建工具做的事情远不止于此，比如:

模块化开发支持:支持直接从 node modules 里引入代码
提高项目性能:压缩文件、代码分割
优化开发体验:热更新、跨域问题
…..

构建工具减轻了我们的心智负担，让我们不用关心我们写的代码如何在浏览器运行，只需要关心代码怎么写就可以了。市面上主流的构建工具有 Webpack、Vite、esbuild、Rollup、Parcel，以及最近刚出的 turbopack，但目前最流行的依然是 Webpack 和 Vite。

构建工具让我们不用关心代码在浏览器如何运行，我们只需要首次给构建工具提供一个配置文件(这个配置文件也不是必须的，如果你不给他他会有默认的帮你去处理)，有了这个集成的配置文件以后，我们就可以在下次需要更新的时候调用一次对应的命令就好了，如果我们再结合热更新，我们就更加不需要管任何东西，这就是构建工具去做的东西，他让我们不用关心生产的代码也不用关心代码如何在浏览器运行，只需要关心我们的开发怎么写的爽怎么写就好了。