探究vite——新一代前端开发与构建工具（一）

傷城~ 2023-01-13 05:51 134阅读 0赞

Vite (法语意为 "快速的"，发音 `/vit/`) 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

*  一个开发服务器，它基于 [原生 ES 模块][ES] 提供了 [丰富的内建功能][Link 1]，如速度快到惊人的 [模块热更新（HMR）][HMR]。
 *  一套构建指令，它使用 [Rollup][] 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 [插件 API][API] 和 [JavaScript API][] 带来了高度的可扩展性，并有完整的类型支持。

### 创建第一个 Vite 项目 ###

兼容性注意

Vite 需要 [Node.js][] 版本 >= 12.0.0。

使用 NPM:

$ npm init vite@latest

使用 Yarn:

yarn create vite

使用 PNPM:

pnpx create-vite

然后按照提示操作即可！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70][]

在Porject name地方输入你的项目名称，例如我的项目名称是vite-first;

点击回车后，选择你需要前端技术框架：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 1][]

这里我选择：vue

注意vite构建工具，默认是安装vue3.0版本的

![20210416113540919.png][]

按回车选择你所需要的开发语言，这里我选择：JavaScript；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 2][]

然后进入项目，在项目底下安装依赖

cd vite-first
    
     yarn
    
    
    or  
     
    npm install

依赖安装完成后，使用yarn dev命令启动项目。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 3][]

至此，一个使用vite搭建的前端项目就搭建起来了。

以下是本项目的版本信息，在此记录一下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 4][]

## 命令行界面 ##

在安装了 Vite 的项目中，可以在 npm scripts 中使用 `vite` 可执行文件，或者直接使用 `npx vite` 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：

{
      "scripts": {
        "dev": "vite", // 启动开发服务器
        "build": "vite build", // 为生产环境构建产物
        "serve": "vite preview" // 本地预览生产构建产物
      }
    }

可以指定额外的命令行选项，如 `--port` 或 `--https`。运行 `npx vite --help` 获得完整的命令行选项列表。

[ES]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
[Link 1]: https://cn.vitejs.dev/guide/features.html
[HMR]: https://cn.vitejs.dev/guide/features.html#hot-module-replacement
[Rollup]: https://rollupjs.org/
[API]: https://cn.vitejs.dev/guide/api-plugin.html
[JavaScript API]: https://cn.vitejs.dev/guide/api-javascript.html
[Node.js]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70]: /images/20221022/56447db323ca4e288ed3c161501d4bff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 1]: /images/20221022/7237766e7e3f463b8fc43adf13677047.png
[20210416113540919.png]: /images/20221022/6d217db4e6bb432995791539c62ab1c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 2]: /images/20221022/863bad85d433402b921e9525dbff2abe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 3]: /images/20221022/3fa0dcc4866d4ffea00d6020b927b801.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70 4]: /images/20221022/81c5b49653684c979961128119771623.png