我们在做vue新项目开发时，第一步会执行命令 npm init vue@latest。这时会弹出一些预设选项给我们选择，完了后会生成一堆项目文件，接着我们导入项目技术栈相应依赖，配置项目，然后开始开发。
命令 npm init vue@latest 具体帮我们做了什么呢？首先会安装和执行create-vue, 它是vue官方提供的脚手架工具。在这款脚手架工具中内置了vite构建工具。如果你使用的是vue-cli脚手架，它里面内置的是webpack构建工具。跟着命令行的提示继续操作，完了后就会生成如下的目录文件结构。
create-vue脚手架包含vite构建工具，什么是脚手架什么是构建工具它们各自有什么作用呢？
01
—
脚手架
前端脚手架（Scaffolding）是一种自动化工具，它可以帮助开发者快速搭建项目的基础结构，从而节省时间并减少重复性工作。在前端开发中，脚手架工具通常用于生成项目模板、配置文件、目录结构等。
以下是一些流行的前端脚手架工具：
-
Create React App: 这是React官方提供的脚手架工具，可以快速生成一个React应用的基础结构。 -
Create-vue：这是Vue官方提供脚手架工具，可以快速生成Vue应用基础结构。 -
Vue CLI: Vue.js的官方脚手架工具，用于快速搭建Vue.js项目。 -
Angular CLI: Angular的官方脚手架工具，用于快速创建和管理Angular项目。
npx create-react-app my-appcd my-appnpm start02
—
构建工具
Webpack: 一个现代JavaScript应用程序的静态模块打包器，它可以将项目中的所有依赖项和模块打包成一个或多个bundle。 Rollup: 一个模块打包器，专注于生成库文件，特别是用于构建JavaScript库。 Gulp: 一个自动化构建系统，使用代码而非配置来定义任务，可以执行多种任务，如压缩、合并、编译等。 Grunt: 类似于Gulp，Grunt是一个JavaScript任务运行器，通过配置文件来定义任务。 Parcel: 一个零配置的Web应用打包器，它提供了快速的开发服务器和热模块替换功能。 Browserify: 一个工具，允许在浏览器中使用Node.js模块，可以将多个模块打包成一个文件。 Esbuild: 一个非常快速的打包器，由Go语言编写，专注于提供快速的构建速度。 Vite: 由Vue团队成员开发的构建工具，它利用原生ES模块导入（ESM）提供丰富的开发体验和生产优化。
编译: 将源代码编译成浏览器可以理解的格式。 打包: 将多个文件合并成一个或多个bundle。 压缩: 减小文件大小，提高加载速度。 优化: 优化代码，提高运行效率。 热模块替换: 在开发过程中，替换模块而不重新加载整个页面。 代码分割: 按需加载代码，减少初始加载时间。 依赖管理: 管理和解析项目依赖。
03
—
脚手架和构建工具区别
- 目的: 脚手架工具的目的在于自动生成一套完整的项目结构和配置文件，简化项目的初始设置。构建工具则聚焦于源代码的处理，包括编译、打包、优化等。
- 使用时间点: 脚手架工具通常在项目开发之初使用一次，而构建工具则会在开发的整个生命周期中反复使用。
04
—
我理解的构建工具
上面是构建工具比较官方的介绍。对于构建工具我们从另一个角度来理解。
大家都知道浏览器只支持 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。
构建工具让我们不用关心代码在浏览器如何运行，我们只需要首次给构建工具提供一个配置文件(这个配置文件也不是必须的，如果你不给他他会有默认的帮你去处理)，有了这个集成的配置文件以后，我们就可以在下次需要更新的时候调用一次对应的命令就好了，如果我们再结合热更新，我们就更加不需要管任何东西，这就是构建工具去做的东西，他让我们不用关心生产的代码也不用关心代码如何在浏览器运行，只需要关心我们的开发怎么写的爽怎么写就好了。
原创文章，作者：guozi，如若转载，请注明出处：https://www.sudun.com/ask/88464.html
