6.2 创建一个 Vite 应用

在使用之前，首先明白 Vite 有两部分构成：

开发服务器使用 Esbuild 执行编译和构建，并提供了超快的 HRM。打包项目因为 Esbuild 的支持还不完善，所以目前使用 Rollup 实现。

但不管是 Esbuild 还是 Rollup，它们的构建目标都是支持原生 ESM 的现代浏览器，并且需要高版本的 Node.js 来处理一些高级模版。建议 Node.js 统一安装 Node 16+ 以上的版本，这样可以支持大部分功能。

当然你也可以通过 StackBlitz 在线试用 vite，免去了本地搭建环境，快速了解 Vite。

6.2.1 脚手架创建

在确保 Node.js 正确安装之后，我们来全局使用 Vite 脚手架工具 create-vite：

$ yarn create vite

执行该命令后会自动安装 Vite 并提示创建项目。输入项目名称后，可选择需要使用的框架，Vite 几乎支持所有的主流框架，常见框架有：

选择框架后可以选择模版，模版包括最常用的 JavaScript 模版和 TypeScript 模版。Vite 还对部分框架支持了 swc（Rust 版的 Babel）模版。当然我们还可以直接在命令行中指定项目名称，并通过 --template 参数指定模版：

$ yarn create vite [project-namep] --template vue-ts

我们选择一个 vue-ts 模版，创建之后的目录结构和上一章的备忘录项目几乎一样。支持的模版名称还有 vue，react，react-ts，svelte，svelte-ts 等。

上述的模版都是官方提供的基础模版，如果你想要更全的模版，比如集成了路由、状态管理、UI 框架的模版，可以选择社区模版。

具体有哪些社区模版，可以在 GitHib 中搜索 awesome-vite 这个项目，里面有各种各样的社区模版，总有一个适合你。

使用社区模版用以下命令：

$ npx degit [template-name] [project-name]
# 举例：
$ npx degit electron-vite/electron-vite-react electron-vite

Vite 提供了许多命令用于在终端执行不同的任务。查看生成的 package.json 文件中，可以看到定义了三个 script 脚本如下：

json

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

脚本中使用了 “vite” 命令启动开发服务器，该命令是 “vite dev” 命令的简写。

“vite build” 命令构建生产环境代码，打包后的代码默认输出到 dist 文件夹。

“vite preview” 命令则会启动一个 Web 服务器用于访问 dist 文件夹。如果没有打包直接执行 “vite preview”，在浏览器中访问会显示 404 状态，如下：

Vite 为以上三个命令提供了丰富的选项参数，我们一一介绍。

该命令的选项参数一般都是用于定制开发服务器，常用参数如下：

--mode 可以指定当前环境是开发环境还是生产环境。'development' 表示开发环境，'production' 表示生产环境，可用于调试不同环境下的页面状态或逻辑。比如在某个组件中开发环境和生产环境要显示不同的标识，就可以用该模式来测试。

该命令的选项参数大多是打包代码的配置，常用参数如下：

Vite 默认的配置文件是当前目录下的 vite.config.js。如果使用其他配置文件，则需要 -c 参数指定。开发模式下修改源码后会自动重新构建，打包代码则不会，如果需要修改源码后重新打包，请手动添加 -w 参数。

该命令的 --mode 参数和 vite dev 命令中的 --mode 参数意义相同，不同的是开发服务器会把构建后的代码保存在内存中运行，我们看不到代码内容；而这里则将代码直接输出到 dist 文件夹，你可以指定 'development' 后查看开发环境构建的代码内容。

该命令的选项参数与 vite dev 基本一致，都是用于定制如何启动一个 Web 服务器。

默认情况下启动的 Web 服务器会指向 dist 文件夹，可以通过 --outDir 参数修改需要预览的文件夹。更多命令选项，通过运行 npx vite --help 查看。