# 笔记

# 2022 年 7 月 1 日

# vite 下访问环境变量

vite 提供了一个特殊的对象：import.meta.env，用于暴露环境变量。其包含几个在任意时候都可以访问的内建变量：

import.meta.env.MODE：表示运行模式
import.meta.env.BASE_URL：表示基本 url，通过 base 配置项决定
import.meta.env.PROD：是否为生产环境
import.meta.env.DEV：是否为开发环境（与 PROD 永为相反值）
import.meta.env.SSR：是否运行在 server 上

import.meta.env 几乎可以用在除 vite.config.ts 外的其他地方。根据不同的运行环境（dev or prod）会暴露出对应的环境变量，可分别在 .env.development 和 .env.production 中配置，需要注意一点：只有 VITE_ 前缀的环境变量才会被暴露出来

# 2022 年 7 月 2 日

# vite 打包资源分类

默认下 vite 打包的资源文件都在 /assets/ 下，且没有细分子文件夹。可以通过配置 rollupOptions 来管理细分资源

export default {
  build: {
    rollupOptions: {
      // 将资源分拣分类到指定目录下
      output: {
        entryFileNames: "assets/js/[name]-[hash].js",
        chunkFileNames: "assets/js/[name]-[hash].js",
        assetFileNames: (chunkInfo: any) => {
          const endFix = path.extname(chunkInfo.name)
          if ([".png", ".jpg", ".jpeg"].indexOf(endFix) > -1) {
            return `assets/img/[name]-[hash].[ext]`
          } else {
            return `assets/[ext]/[name]-[hash].[ext]`
          }
        }
      }
    }
  }
}

# 2022 年 7 月 3 日

# isolatedModules（隔离模块）

vite 天然支持 typescript，并且使用 esbuild 将 typescript 转译成 JavaScript

tsconfig.json 中 compilerOptions 下的 isolatedModules 配置项默认设置为 true，这是因为 esbuild 只执行没有类型信息的转译，并不支持某些特性如：enum、隐式类型导入等

一些库如 vue 不能很好地与"isolatedModules": true共同工作，那么可以暂时设置 "skipLibCheck": true 来缓解这个异常

文档地址：isolatedModules (opens new window)

# 2022 年 7 月 4 日

# CSS Modules

任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件。导入这样的文件会返回一个相应的模块对象：

/* example.module.css */
.red {
  color: red;
}

import classes from "./example.module.css"
document.getElementById("foo").className = classes.red

如果 css.modules.localsConvention 设置开启了 camelCase 格式变量名转换（例如 localsConvention: 'camelCaseOnly'），你还可以使用按名导入。

// .apply-color -> applyColor
import { applyColor } from "./example.module.css"
document.getElementById("foo").className = applyColor

文档地址：CSS Modules (opens new window)

# 2022 年 7 月 5 日

# 静态资源处理

导入一个静态资源会返回解析后的 URL

import imgUrl from "./img.png"
document.getElementById("hero-img").src = imgUrl

添加一些特殊的查询参数可以更改资源被引入的方式：

// 显式加载资源为一个 URL
import assetAsURL from "./asset.js?url"
// 以字符串形式加载资源
import assetAsString from "./shader.glsl?raw"
// 加载为 Web Worker
import Worker from "./worker.js?worker"
// 在构建时 Web Worker 内联为 base64 字符串
import InlineWorker from "./worker.js?worker&inline"

# 2022 年 7 月 6 日

# Glob 导入

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：

const modules = import.meta.glob("./dir/*.js")

以上将会被转译为下面的样子：

// vite 生成的代码
const modules = {
  "./dir/foo.js": () => import("./dir/foo.js"),
  "./dir/bar.js": () => import("./dir/bar.js")
}

TODO: 待完善 Glob 导入 (opens new window)

← 2022.6 2023.1 →