Day 2 vite的初步尝试

尝试在线Vite

在 StackBlitz 上在线试用 Vite

• 特点:

  • 在浏览器中运行基于 Vite 的构建设置

  • 它与本地设置几乎相同

  • 不需要在您的计算机上安装任何内容

  • 导航到 vite.new/{template} 以选择要使用的框架。

• 支持的模板预设

• 

搭建你的第一个 Vite 项目

版本要求

• Node.js 版本 18+。,20+。

• 某些模板需要更高的 Node.js 版本才能工作，如果您的包管理器发出警告，请升级。

安装命令

• 一般安装

npm create vite@latest

• 指定项目名称和要使用的模板。

  • 例如，要构建一个 Vite + Vue 项目，请运行：

  # npm 7+, extra double-dash is needed:
  npm create vite@latest my-vue-app -- --template vue
  
  # yarn
  yarn create vite my-vue-app --template vue
  
  # pnpm
  pnpm create vite my-vue-app --template vue
  
  # bun
  bunx create-vite my-vue-app --template vue
  

社区模板

• create-vite

  • 是一个从流行框架的基本模板快速启动项目的工具

• 社区模版网站

  • Awesome Vite(https://github.com/vitejs/awesome-vite#templates)

    • 模版由社区维护，包含其他工具或针对不同的框架。1

• 对于 https://github.com/user/project 的模板

  • 您可以使用 https://github.stackblitz.com/user/project 在线试用（在项目 URL 的 github 后面添加 .stackblitz ）

• 使用 degit 等工具通过其中一个模板来搭建您的项目。

  • 假设该项目位于 GitHub 上并使用 main 作为默认分支，您可以使用以下命令创建本地副本：

    npx degit user/project#main my-project
    cd my-project
    
    npm install
    npm run dev
    

index.html 和项目根目录

• Vite 是一个服务器

  • index.html 位于前端和中央，而不是隐藏在 public 内。

  • 在开发过程中，而 index.html 是您应用程序的入口点。

• Vite 将 index.html 视为源代码和模块图的一部分。

  • 解析引用您的 JavaScript 源代码的 <script type="module" src="..."> 。

    • 内联 <script type="module"> 和通过 <link href> 引用的 CSS 也可以享受 Vite 特有的功能。

    • index.html 内的 URL 会自动重新rebased，因此不需要特殊的 %PUBLIC_URL% 占位符。

• Vite 具有“根目录”的概念，您的文件将从该目录提供服务。

  • 您将在文档的其余部分中看到它被引用为 <root> 。

  • 源代码中的绝对 URL 将使用项目根目录作为基础进行解析，因此您可以像使用普通静态文件服务器一样编写代码

  • Vite 还能够处理解析到根外文件系统位置的依赖项，这使得它即使在基于 monorepo 的设置中也可用。

• 支持具有多个 .html 入口点的多页面应用

指定备用根

• 运行 vite 会使用当前工作目录作为 root 启动开发服务器。

• 您可以使用 vite serve some/sub/dir 指定替代根。

• 注意:

  • Vite 还将解析项目根目录中的配置文件（即 vite.config.js ），因此如果根目录发生更改，您需要移动它。

命令行界面

• 在 npm 脚本中使用 vite 二进制文件，或者直接使用 npx vite 运行它。

  • 以下是搭建的 Vite 项目中默认的 npm 脚本：

    {
      "scripts": {
        "dev": "vite", // 启动开发服务器，别名:' vite dev '， ' vite serve '
        "build": "vite build", //为生产而构建
        "preview": "vite preview" // 本地预览生产构建
      }
    }
    

• 您可以指定其他 CLI 选项，

  • 例如 --port 或 --open 。

• 要获取 CLI 选项的完整列表，

  • 请在项目中运行 npx vite --help

命令行参数

开发服务器

在当前目录启动Vite开发服务器。

• 用法: vite [root]

• 选项

  Options 选项
  --host [host]	Specify hostname (string) 指定主机名 ( string )
  --port <port>	Specify port (number) 指定端口 ( number )
  --open [path]	Open browser on startup (boolean | string) 启动时打开浏览器 ( boolean | string )
  --cors	Enable CORS (boolean) 启用 CORS ( boolean )
  --strictPort	Exit if specified port is already in use (boolean) 如果指定端口已在使用中则退出 ( boolean )
  --force	Force the optimizer to ignore the cache and re-bundle (boolean) 强制优化器忽略缓存并重新捆绑 ( boolean )
  -c, --config <file>	Use specified config file (string) 使用指定的配置文件( string )
  --base <path>	Public base path (default: /) (string) 公共基本路径（默认： / ）（ string ）
  -l, --logLevel <level>	info
  --clearScreen	Allow/disable clear screen when logging (boolean) 登录时允许/禁用清屏 ( boolean )
  --profile	Start built-in Node.js inspector (check Performance bottlenecks) 启动内置 Node.js 检查器（检查性能瓶颈）
  -d, --debug [feat]	Show debug logs (string | boolean) 显示调试日志 ( string | boolean )
  -f, --filter <filter>	Filter debug logs (string) 过滤调试日志 ( string )
  -m, --mode <mode>	Set env mode (string) 设置环境模式 ( string )
  -h, --help	Display available CLI options 显示可用的 CLI 选项
  -v, --version	Display version number 显示版本号

建造

为生产而构建。

• 用法: vite build [root]

• 选项

  Options 选项
  --target <target>	Transpile target (default: "modules") (string) 转译目标（默认： "modules" ）（ string ）
  --outDir <dir>	Output directory (default: dist) (string) 输出目录（默认： dist ）（ string ）
  --assetsDir <dir>	Directory under outDir to place assets in (default: "assets") (string) outDir 下放置资源的目录（默认： "assets" ）（ string ）
  --assetsInlineLimit <number>	Static asset base64 inline threshold in bytes (default: 4096) (number) 静态资源 base64 内联阈值（以字节为单位）（默认值： 4096 ） ( number )
  --ssr [entry]	Build specified entry for server-side rendering (string) 为服务器端渲染构建指定条目 ( string )
  --sourcemap [output]	Output source maps for build (default: false) (boolean | "inline" | "hidden") 用于构建的输出源映射（默认： false ）（ boolean | "inline" | "hidden" ）
  --minify [minifier]	Enable/disable minification, or specify minifier to use (default: "esbuild") (boolean | "terser" | "esbuild") 启用/禁用缩小，或指定要使用的缩小器（默认： "esbuild" ）（ boolean | "terser" | "esbuild" ）
  --manifest [name]	Emit build manifest json (boolean | string) 发出构建清单 json ( boolean | string )
  --ssrManifest [name]	Emit ssr manifest json (boolean | string) 发出 ssr 清单 json ( boolean | string )
  --force	Force the optimizer to ignore the cache and re-bundle (experimental)(boolean) 强制优化器忽略缓存并重新捆绑（实验）( boolean )
  --emptyOutDir	Force empty outDir when it's outside of root (boolean) 当 outDir 位于根目录之外时强制为空 ( boolean )
  -w, --watch	Rebuilds when modules have changed on disk (boolean) 当磁盘上的模块发生更改时重建 ( boolean )
  -c, --config <file>	Use specified config file (string) 使用指定的配置文件( string )
  --base <path>	Public base path (default: /) (string) 公共基本路径（默认： / ）（ string ）
  -l, --logLevel <level>	Info
  --clearScreen	Allow/disable clear screen when logging (boolean) 登录时允许/禁用清屏 ( boolean )
  --profile	Start built-in Node.js inspector (check Performance bottlenecks) 启动内置 Node.js 检查器（检查性能瓶颈）
  -d, --debug [feat]	Show debug logs (string | boolean) 显示调试日志 ( string | boolean )
  -f, --filter <filter>	Filter debug logs (string) 过滤调试日志 ( string )
  -m, --mode <mode>	Set env mode (string) 设置环境模式 ( string )
  -h, --help	Display available CLI options 显示可用的 CLI 选项

其他的

vite optimize

预捆绑依赖项

• 用法: vite optimize [root]

• 选项​

Options 选项
--force	Force the optimizer to ignore the cache and re-bundle (boolean) 强制优化器忽略缓存并重新捆绑 ( boolean )
-c, --config <file>	Use specified config file (string) 使用指定的配置文件( string )
--base <path>	Public base path (default: /) (string) 公共基本路径（默认： / ）（ string ）
-l, --logLevel <level>	Info
--clearScreen	Allow/disable clear screen when logging (boolean) 登录时允许/禁用清屏 ( boolean )
-d, --debug [feat]	Show debug logs (string | boolean) 显示调试日志 ( string | boolean )
-f, --filter <filter>	Filter debug logs (string) 过滤调试日志 ( string )
-m, --mode <mode>	Set env mode (string) 设置环境模式 ( string )
-h, --help	Display available CLI options 显示可用的 CLI 选项

vite preview

本地预览生产版本。不要将其用作生产服务器，因为它不是为此设计的。

• 用法: vite preview [root]

• ​选项

Options 选项
--host [host]	Specify hostname (string) 指定主机名 ( string )
--port <port>	Specify port (number) 指定端口 ( number )
--strictPort	Exit if specified port is already in use (boolean) 如果指定端口已在使用中则退出 ( boolean )
--open [path]	Open browser on startup (boolean | string) 启动时打开浏览器 ( boolean | string )
--outDir <dir>	Output directory (default: dist)(string) 输出目录（默认： dist ）( string )
-c, --config <file>	Use specified config file (string) 使用指定的配置文件( string )
--base <path>	Public base path (default: /) (string) 公共基本路径（默认： / ）（ string ）
-l, --logLevel <level>	Info
--clearScreen	Allow/disable clear screen when logging (boolean) 登录时允许/禁用清屏 ( boolean )
-d, --debug [feat]	Show debug logs (string | boolean) 显示调试日志 ( string | boolean )
-f, --filter <filter>	Filter debug logs (string) 过滤调试日志 ( string )
-m, --mode <mode>	Set env mode (string) 设置环境模式 ( string )
-h, --help	Display available CLI options 显示可用的 CLI 选项

使用未发布的提交

• 想要使用新版本来测试最新功能

  • 则需要将 vite 存储库克隆到本地计算机，然后自行构建并链接它（需要 pnpm）：

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # use your preferred package manager for this step

• 然后转到基于 Vite 的项目并运行 pnpm link --global vite （或用于全局链接 vite 的包管理器）。

• 现在重新启动开发服务器，以站在最前沿！

社区

如果您有疑问或需要帮助，请通过 Discord 和 GitHub Discussions 联系社区。

[Discord](https://chat.vitejs.dev/) and [GitHub Discussions](https://github.com/vitejs/vite/discussions).