马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
×
一、Vite 简介
Vite 是一种新型的前端构建工具，旨在为现代 web 开发提供更快、更精简的开发体验。它由尤雨溪（Vue.js 的作者）团队开发，在当下的前端项目中被广泛应用，尤其恰当基于现代 JavaScript 框架（如 Vue、React 等）构建的项目。
与传统的构建工具（如 Webpack）相比，Vite 利用了欣赏器原生支持的 ES 模块（ES Modules），在开发阶段不必要像传统方式那样将全部模块提前打包，而是按需进行编译和加载，从而实现了极快的冷启动速率和模块热更换（HMR），大大提升了开发效率。
二、Vite 的核心特点
1. 快速的冷启动
在传统构建工具启动开发服务器时，每每必要对整个项目的代码进行打包分析等一系列复杂利用，耗时较长。而 Vite 基于 ES 模块的特性，在启动时只需启动一个轻量级的开发服务器，然后直接将欣赏器指向源文件，欣赏器会按照 ES 模块的规则自动去加载依赖，无需提前全量打包，所以能在瞬间启动项目，开发者可以快速进入开发状态。
例如，对于一个中大型的 Vue 项目，利用 Webpack 启动开发服务器可能必要数秒甚至十几秒，而 Vite 每每能在几百毫秒内就启动完成。
2. 高效的模块热更换（HMR）
当我们在开发过程中修改了代码，Vite 可以或许精准地定位到发生变化的模块，并仅仅更新该模块对应的内容在欣赏器中的显示，无需刷新整个页面。这使得开发者可以实时看到代码修改后的结果，保持开发的连贯性，进一步提高开发效率。
比如在修改一个 Vue 组件的样式大概逻辑时，修改后几乎立即就能在欣赏器中看到更新后的样子，利用体验非常流畅。
3. 原生 ES 模块支持
Vite 充实利用了现代欣赏器原生支持 ES 模块这一特性。在开发阶段，Vite 直接将代码以 ES 模块的形式提供给欣赏器，欣赏器会按照 ES 模块的规范去剖析和加载依赖，淘汰了中心转化的本钱。不过在生产环境下，Vite 还是会对代码进行打包优化等处理，以保证最佳的性能和兼容性。
4. 插件化架构
Vite 拥有丰富的插件生态，通过插件可以轻松扩展其功能，满意各种差别的项目需求。无论是对特定文件类型的处理、优化开发体验，还是与第三方工具的集成等，都可以通过编写或利用现有的插件来实现。
例如，有插件可以资助优化 CSS 的处理、实现对 SVG 文件的特别处理，大概将项目与后端 API 进行更好的联调等。
三、Vite 的根本利用
1. 安装
要利用 Vite，起首必要全局安装它的脚手架工具：
- npm install -g create-vite
- # 或者使用 yarn
- yarn global add create-vite
安装完成后，就可以用它来创建新项目了。
2. 创建项目
利用以下命令创建一个基于 Vite 的项目（以 Vue 项目为例）：
- # 创建一个基于 Vue 的 Vite 项目，项目名称为 my-vite-project
- create-vite my-vite-project --template vue
这里的 --template 参数可以指定差别的模板，除了 vue，还可以选择 react、preact 等，根据自己的项目框架需求来定。
创建完成后，进入项目目次：
3. 安装项目依赖并启动开发服务器
在项目目次下，运行以下命令安装依赖：
- npm install
- # 或者
- yarn install
然后启动开发服务器：
此时，Vite 会启动开发服务器，并且在控制台输出项目运行的地址（一般是 http://localhost:3000 之类的），打开欣赏器访问该地址，就能看到项目运行起来了。
4. 项目结构
一个典型的 Vite 项目结构如下：
- my-vite-project/
- ├── node_modules/
- ├── public/
- │ └── favicon.ico
- ├── src/
- │ ├── assets/
- │ ├── components/
- │ ├── App.vue
- │ └── main.js
- ├── index.html
- ├── package.json
- ├── vite.config.js
- └── README.md
- public 目次：存放一些公共的静态资源，比如网站图标等，这些资源会被直接复制到项目的根目次下，在 HTML 中可以直接通过相对路径引用。
- src 目次：是项目的主要源代码目次，包罗了各种组件、样式、业务逻辑代码等。
- index.html：项目的入口 HTML 文件，Vite 会将其作为开发服务器的入口，并且在构建生产版本时，也会基于此文件进行处理。
- vite.config.js：Vite 项目的设置文件，在这里可以设置插件、服务器相关选项、构建相关的设置等，用来定制化项目的构建和开发流程。
5. 设置文件（vite.config.js）
下面是一个简朴的 vite.config.js 文件示例，用于设置一些基础的功能，比如添加插件、设置服务器端口等：
- import { defineConfig } from 'vite';
- import vue from '@vitejs/plugin-vue';
- export default defineConfig({
- plugins: [vue()],
- server: {
- port: 3001, // 设置开发服务器的端口为 3001
- },
- });
- plugins 字段：用于设置项目必要利用的插件，这里引入了 @vitejs/plugin-vue 插件来支持 Vue 项目的编译等相关处理，差别的项目框架必要对应的插件支持。
- server 字段：可以对开发服务器进行各种设置，除了端口，还可以设置署理等功能，方便与后端 API 进行联调。例如，设置署理可以如许写：
- server: {
- port: 3001,
- proxy: {
- '/api': {
- target: 'http://localhost:8080', // 后端 API 地址
- changeOrigin: true,
- rewrite: (path) => path.replace(/^\/api/, ''),
- },
- },
- },
如许，前端项目中以 /api 开头的请求都会被署理到 http://localhost:8080 这个后端服务器地址上。
6. 构建生产版本
当项目开发完成，必要部署到生产环境时，可以利用以下命令构建项目：
- npm run build
- # 或者
- yarn build
Vite 会对项目进行打包、优化等一系列利用，生成可以直接部署到服务器上的静态文件，一般会生成 dist 目次，里面包罗了 HTML、CSS、JavaScript 等颠末处理后的文件，将这个目次下的内容部署到服务器相应位置即可让网站上线运行。
四、Vite 与差别框架的结合
1. Vue 项目
- 如前面所述，创建 Vue 项目时利用对应的 vue 模板即可。在项目中编写 Vue 组件、利用 Vue 的各种特性（如 Composition API、Options API 等）都和常规的 Vue 开发雷同，Vite 会自动处理好相关的编译和优化工作。
- 对于 Vue 的单文件组件（.vue 文件），Vite 借助插件可以很好地剖析其中的 <template>、<script> 和 <style> 部门，将它们分别编译成对应的 JavaScript、CSS 等代码。
2. React 项目
- 创建 React 项目时选择 react 模板，例如：
- create-vite my-react-project --template react
- 在 React 项目中，可以正常利用 React 的各种 API（如 useState、useEffect 等）来构建组件、处理逻辑。Vite 会确保 React 项目中的 JSX 等语法可以或许被正确编译和处理，同时也能享受到 Vite 的快速开发和构建上风。
3. 其他框架
除了 Vue 和 React，Vite 也支持 Preact、Svelte 等其他前端框架，利用方式雷同，都是通过选择对应的模板来创建项目，然后按照各自框架的开发规范进行代码编写，Vite 会在底层做好适配和构建相关的工作。
五、Vite 的生态与社区
Vite 在前端社区中拥有庞大的生态，有大量的开源插件可供选择，涵盖了从代码风格检查、性能优化到与各种第三方工具集成等方方面面。同时，很多开发者也在不停分享关于 Vite 的利用履历、最佳实践以及各种实际项目中的案例，通过参与社区（如 GitHub 上的 Vite 仓库、相关论坛等）可以实时了解到 Vite 的最新动态、学习他人的优秀做法，进一步提升自己运用 Vite 进行前端开发的本领。
总之，Vite 作为一个强大且高效的前端构建工具，为前端开发带来了诸多便利，值得深入学习和把握，盼望这份笔记能资助你更好地开启 Vite 的自学之旅呀！
|
发表于 2024-11-25 08:48:04