vite的初步尝试

发布时间:2023年12月28日

尝试在线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

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

  • 社区模版网站

  • 对于 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 )
    --corsEnable CORS (boolean) 启用 CORS ( boolean )
    --strictPortExit if specified port is already in use (boolean) 如果指定端口已在使用中则退出 ( boolean )
    --forceForce 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
    --clearScreenAllow/disable clear screen when logging (boolean) 登录时允许/禁用清屏 ( boolean )
    --profileStart 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, --helpDisplay available CLI options 显示可用的 CLI 选项
    -v, --versionDisplay 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 )
    --forceForce the optimizer to ignore the cache and re-bundle (experimental)(boolean) 强制优化器忽略缓存并重新捆绑(实验)( boolean )
    --emptyOutDirForce empty outDir when it's outside of root (boolean) 当 outDir 位于根目录之外时强制为空 ( boolean )
    -w, --watchRebuilds 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
    --clearScreenAllow/disable clear screen when logging (boolean) 登录时允许/禁用清屏 ( boolean )
    --profileStart 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, --helpDisplay available CLI options 显示可用的 CLI 选项

其他的

vite optimize

预捆绑依赖项

  • 用法: vite optimize [root]

  • 选项?

Options 选项
--forceForce 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
--clearScreenAllow/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, --helpDisplay available CLI options 显示可用的 CLI 选项
vite preview

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

  • 用法: vite preview [root]

  • ?选项

Options 选项
--host [host]Specify hostname (string) 指定主机名 ( string )
--port <port>Specify port (number) 指定端口 ( number )
--strictPortExit 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
--clearScreenAllow/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, --helpDisplay 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).

文章来源:https://blog.csdn.net/m0_73653709/article/details/135255221
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。