这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天

浅谈构建工具

前端工程的痛点

前端工程是一项非常复杂的工作，它需要涉及到大量的代码、技术、工具等。前端工程师需要在不断变化的技术栈中维护高效和可维护性的代码。

• 模块化
• 资源编译
• 产物质量
• 开发效率

前端构建工具的意义

• 模块化方案
  • 提供模块加载方案
  • 兼容不同模块规范
• 语法转译
  • 高级语法转译，如Sass、TypeScript
  • 资源加载，如图片、字体、worker
• 产物质量
  • 产物压缩、无用代码删除、语法降级
• 开发效率
  • 热更新

Vite概要介绍

Vite是一款前端构建工具，诞生于2020年。它是一款快速、轻量、实用的前端构建工具，主要用于构建现代化JavaScript应用。

Vite的独特之处在于它使用了静态模块加载技术，从而提高了构建速度和运行效率。相比于传统的前端构建工具，Vite能够更快地构建项目，同时也更容易维护和升级。

另外，Vite还提供了一系列的开发工具，以帮助开发人员更快地开发项目。例如，Vite提供了一个内置的开发服务器，可以让开发人员在开发过程中快速预览项目。此外，Vite还支持热更新，可以在不重新加载整个页面的情况下更新项目内容。

定位：新一代前端构建工具

两大组成部分:

• No-bundle开发服务,源文件无需打包
• 生产环境基于Rollup 的 Bundler

核心特征

• 高性能，dev启动速度和热更新速度非常快!
• 简单易用，开发者体验好

Vite上手实战

项目初始化

Vite项目初始化

#提前安装pnpm
npm i -g pnpm

#初始化命令
pnpm create vite

#安装依赖
pnpm install

#启动项目
npm run dev

输入初始化参数

目录结构