Vite 基础笔记 03

已注销
585 阅读6分钟

Vite 基础笔记 03

Vite 中静态资源的处理

  • 将资源引入为 URL
// 服务时引入一个静态资源会返回解析后的公共路径
import logo from './images/logo.png'

<img src={logo} />
  • 显式 URL 引入: 未被包含在内部列表或 assetsInclude 中的资源，可以使用 ?url 后缀显式导入为一个 URL
  • 将资源引入为字符串: 资源可以使用 ?raw 后缀声明作为字符串引入。
  • 导入脚本作为 Worker: 脚本可以通过 ?worker 或 ?sharedworker 后缀导入为 web worker。
// js 中使用 Web Worker
const worker = new Worker(./worker.js)

// Vite 中使用 Web Worker  在生产构建中将会分离出 chunk
import MyWorker from './worker?worker'
const worker = new MyWorker()

// sharedworker
import SharedWorker from './shader.js?sharedworker'
const sharedWorker = new SharedWorker()

// 内联为 base64 字符串
import InlineWorker from './shader.js?worker&inline'
  • new URL()： import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：
const logo = new URL('./images/logo.png', import.meta.url).href

<img src={logo} />

这个模式同样还可以通过字符串模板支持动态 URL，在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。

function getImage(name) {
  return new URL(`./images/${name}.png`, import.meta.url).href
}

  • public 目录： 如果你有下列这些资源：

    1. 不会被源码引用（例如 robots.txt）
    2. 必须保持原有文件名（没有经过 hash）
    3. ...或者你压根不想引入该资源，只是想得到其 URL。

    那么你可以将该资源放在指定的 public 目录中，它应位于你的项目根目录。该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。目录默认是 <root>/public，但可以通过 publicDir 来配置。

    请注意：

    1. 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子，public/icon.png 应该在源码中被引用为 /icon.png。
    2. public 中的资源不应该被 JavaScript 文件引用。

JSON 和 Glob 的导入

  • json 可以被直接导入 --同样支持具名导入
// 导入整个对象
import json form './example.json'

// 对一个根字段使用具名导入 --有效帮助 treeshaking!
import {field} form './example.json'
  • Vite 支持使用特殊的 import.meta.glob 函数从系统导入多个模块
const modul = import.meta.glob(./dir/*.js)

构建生产版本

当需要将应用部署到生产环境时，只需运行 vite build 命令。默认情况下，它使用 <root>/index.html 作为其构建入口点，并生成能够静态部署的应用程序包。

  • 浏览器兼容性

    用于生产环境的构建包会假设目标浏览器支持现代 JavaScript 语法。默认情况下，Vite 的目标浏览器是指能够 支持原生 ESM script 标签 和 支持原生 ESM 动态导入 的。可以通过 build.target 配置项，指定构建目标，最低支持 es2015

    注意：默认情况下 Vite 只处理语法转译，且 默认不包含任何 polyfill。（polyfill 是一个基于用户浏览器 User-Agent 字符串自动生成 polyfill 包的服务。）传统浏览器可以通过插件 @vitejs/plugin-legacy 来支持，它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill。兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。

  • 公共基础路径

    如果你需要在嵌套的公共路径下部署项目，只需指定 base 配置项，然后所有资源的路径都将据此配置重写。也可以通过命令行参数指定： vite build --base=/my/public/path/。

    由 JS 引入的资源 URL，CSS 中的 url() 引用以及 .html 文件中引用的资源在构建过程中都会自动调整，以适配此选项。当然，情况也有例外，当访问过程中需要使用动态连接的 url 时，可以使用全局注入的 import.meta.env.BASE_URL 变量，它的值为公共基础路径。

    注意：这个变量在构建时会被静态替换，因此，它必须按 import.meta.env.BASE_URL 的原样出现。（例如 import.meta.env['BASE_URL'] 是无效的）

  • 多页面应用模式

    假设你有下面这样的项目文件结构

├── package.json
├── vite.config.js
├── index.html
├── main.js
└── nested
    ├── index.html
    └── nested.js

在开发过程中，简单地导航或链接到 /nested/ - 将会按预期工作，与正常的静态文件服务器表现一致。在构建过程中，你只需指定多个 .html 文件作为入口点即可：

// vite.config.js 文件夹
const { resolve } = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        nested: resolve(__dirname, 'nested/index.html')
      }
    }
  }
})

如果你指定了另一个根目录，请记住，在解析输入路径时，__dirname 的值将仍然是 vite.config.js 文件所在的目录。因此，你需要把对应入口文件的 root 的路径添加到 resolve 的参数中。

环境变量和模式

  • 环境变量

    Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

    1. import.meta.env.MODE: {string} 应用运行的模式。
    2. import.meta.env.BASE_URL: {string} 部署应用时的基本 URL，由base配置项决定。
    3. import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
    4. import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

  • .env 文件

    Vite 使用 dotenv 从环境目录中的下列文件加载额外的环境变量：

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

加载的环境变量也会通过 import.meta.env 暴露给客户端源码。为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这个文件中：

DB_PASSWORD=foobar
VITE_SOME_KEY=123

只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。

  • 模式

    默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 以及 serve 命令则运行在 production (生产) 模式。当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境变量：

// .env.production 文件
VITE_APP_TITLE=My App

// 模式是一个更广泛的概念，而不仅仅是开发和生产。

部署静态站点

  1. 构建应用

    vite build

  2. 将项目发布到远程仓库

    创建远程仓库，将本地代码发布到远程仓库

  3. 注册腾讯云账号

    https://cloud.tencent.com

  4. web云托管项目

    https://webify.cloudbase.net

  • @Title: Vite 基础笔记 03
  • @Content: Vite
  • @Autor: ling.wang
  • @StudyDate: 2022-08-05
  • @WritingDate: 2022-08-05、2022-08-08
avatar
文章
阅读
粉丝