这是我参与[第五届青训营]伴学笔记创作活动的第14天
为什么需要构建工具
构建工具是必不可少的，因为它可以提高开发效率，并且可以为生产环境提供高质量的代码。
- 自动化任务：构建工具可以自动执行常见的任务，例如编译代码、压缩文件、生成 source maps、运行测试等，从而减少开发者的工作量。
- 代码优化：构建工具可以对代码进行优化，例如压缩 JavaScript 和 CSS 以加快页面加载速度，消除不必要的代码等。
- 合并和分离文件：构建工具可以将多个文件合并为一个，从而减少 HTTP 请求数量，并将代码分离到不同的文件中，便于维护和管理。
- 方便的部署：构建工具可以生成生产环境可用的代码，并且提供方便的部署流程，使开发者可以轻松将代码部署到生产环境。
Vite是什么
Vite 是一个快速、轻量级的前端构建工具，它的目标是提供一种更快速、更简单的方法来构建和开发前端项目。
Vite 与其他构建工具不同，它不使用打包，而是在开发期间直接将模块导入浏览器，并实时编译 JavaScript 和 CSS。这意味着开发者可以快速更改代码，并且不需要等待打包过程，从而提高开发效率。
此外，Vite 还支持自定义插件，可以满足各种不同的项目需求，并且可以与其他工具，如 Babel 和 PostCSS，无缝集成。
总的来说，Vite 是一个先进的前端构建工具，适用于需要快速构建和开发项目的开发者。
如何使用Vite
- 安装 Vite：你可以使用 npm 安装 Vite，命令如下：
npm install -g @vite/cli
- 创建项目：使用 Vite 创建项目，命令如下：
vite create my-project
- 进入项目目录：使用以下命令进入项目目录：
cd my-project
- 启动开发服务器：使用以下命令启动开发服务器：
npm run dev
- 编写代码：现在你可以开始编写代码了，所有的代码更改都将实时在浏览器中呈现。
- 构建项目：使用以下命令构建项目：
npm run build
- 部署项目：使用以下命令部署项目：
npm run export
使用静态资源
- 将静态资源放在项目的特定文件夹：例如 public、static 等。
- 使用相对路径引入静态资源：例如在 HTML 中使用
<img src="./image.jpg">。 - 使用 URL 访问静态资源：例如在 JavaScript 中使用
fetch('/image.jpg')。 - 配置静态资源的打包规则：例如使用 rollup-plugin-copy 插件复制静态资源。
使用Sass/Scss&CSS Modules
- 安装 sass 插件：在项目根目录下使用 npm 命令安装 sass 插件，例如
npm install sass。 - 创建 Sass 或 SCSS 文件：在项目中创建 .sass 或 .scss 文件，书写样式代码。
- 在 JavaScript 中引入 Sass 或 SCSS 文件：例如在 JavaScript 文件中使用
import styles from './style.scss'。 - 应用 CSS Modules：在 JavaScript 中使用
className属性应用 CSS Modules，例如<div className={styles.container}>。 - 配置 Sass 编译选项：在 vite.config.js 文件中配置 Sass 编译选项，例如选择编译输出格式。
- 运行项目：启动项目，查看 Sass 和 SCSS 文件是否正确编译，并检查 CSS Modules 是否正确生效。
使用HMR
Vite 支持热模块替换（Hot Module Replacement，HMR），可以实现代码改动后页面实时刷新而无需重新加载整个页面。使用 HMR 可以大大提高开发效率。
在 Vite 中使用 HMR 需要进行以下几步：
- 启动项目：使用
vite dev命令启动项目，并打开浏览器预览。 - 编辑代码：修改项目中的代码，例如 JavaScript、HTML 或 CSS 文件。
- 实时刷新：Vite 会自动实时刷新浏览器，显示代码修改后的效果。
Vite整体构架
- 静态资源优化：Vite 通过使用静态资源处理器对静态资源进行优化，以减小文件大小和加速加载速度。
- ESM 模块：Vite 使用 ESM 模块系统，这是一种标准化的 JavaScript 模块系统，可以提高加载速度和代码可维护性。
- 模板渲染：Vite 使用快速模板渲染引擎，可以在浏览器端和服务器端快速渲染模板。
- 热重载：Vite 使用强大的热重载技术，可以在修改代码后实时预览更改，提高开发效率。
- 构建优化：Vite 使用智能的构建系统，对文件进行分析和优化，以大大缩短构建时间。
- 命令行界面（CLI）：Vite 使用易于使用的命令行界面（CLI），可以方便地创建、启动和管理项目。
