vite的基本使用（Mhua）

依赖预构建

依赖预构建是vite自带的功能，具体作用如下：
1、把所有依赖的文件，如果是 CommonJS 规范， 将会转化为 ESModule 规范。
2、把第三方库分散的文件合并打包到一起，减少 HTTP 请求。

如果不希望第三方库进行依赖预构建，可在vite.config.js 配置文件进行配置。

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    // exclude：将指定数组的依赖不进行依赖构建
    exclude: ["lodash-es"],
  },
});

环境变量

.env：所有环境都需要用到的环境变量。（包括开发、生产环境）
.env.development：开发环境用到的环境变量（默认情况下vite将我们的开发环境取名为development）
.env.production：生产环境需要用到的环境变量（默认情况下vite将我们的生产环境取名为production）

vite内置 dotenv库， 利用 dotenv 库可读取 .env .env.development .env.production配置文件中的环境变量。

注意：在开发环境中，.env文件和.env.development中存在同名变量时，后者文件会覆盖前者文件中的变量。生产环境也是同理。

• 获取方式1：在js文件中获取环境变量。注意：环境变量必须以 VITE_ 开头，才能获取到。

console.log(import.meta.env);

• 获取方式2：在node端中获取环境变量。

1、loadEnv函数：1、调用loadEnv函数时，首先获取 .env 文件的环境变量。2、根据函数中的第一个参数值进行拼接，如： .env.development，并且获取指定文件名的环境变量，存放到一个对象中。

2、process.cwd：返回node进程的工作目录。

console.log(process.cwd()); // C:\Users\Lenovo\Desktop\vite_project

3、代码如下：

import { defineConfig, loadEnv } from "vite";
// 获取开发环境的环境变量
const developmentEnv = loadEnv("development", process.cwd(), "");
// 获取生产环境的环境变量
const productionEnv = loadEnv("production", process.cwd(), "");

拆分配置文件

vite.base.config.js：公共配置文件
vite.dev.config.js：开发环境配置文件
vite.prod.config.js：生产环境配置文件
vite.config.js：用于生成相关配置文件。

// vite.config.js 配置文件内容如下
import { defineConfig } from 'vite';
import viteBaseConfig from "./vite.base.config.js"
import viteDevConfig from "./vite.dev.config.js"
import viteProdConfig from "./vite.prod.config.js"

// 写法1
// const envResolver = {
//   "build": () => ({...viteBaseConfig, ...viteProdConfig}),
//   "serve": () => ({...viteBaseConfig, ...viteDevConfig})
// }

// 写法2
// 策略模式
const envResolver = {
  "build": () => Object.assign({}, viteBaseConfig, viteProdConfig),
  "serve": () => Object.assign({}, viteBaseConfig, viteDevConfig)
}

export default defineConfig(({ command, mode }) => {
  // command： "serve" || "build" (开发环境值为 serve，生产环境值为 build)
  const env = loadEnv(mode, process.cwd(), "")
  return envResolver[command]()
})

vite.config.js 配置文件为什么可以书写成 esmodule的形式呢？ 这是因为 vite 在读取 vite.config.js 配置文件的时候会率先解析文件语法，如果发现是 esmodule 规范会直接将 esmodule 规范替换为 CommonJS规范。

环境变量前缀

vite在客户端的环境变量校验前缀默认值是 VITE_，所以我们设置的环境变量只有以 VITE_ 开头的，调用 import.meta.env 才能获取到相关变量。环境变量前缀，可以在vite.config.js配置文件中修改。

import { defineConfig } from "vite"

export default defineConfig({
  // 配置 vite 注入客户端环境变量校验的env前缀
  envPrefix: "hello_"
});

css 配置

一、vite默认对css文件是支持的。
1、vite在读取到main.js中引用 的 css 文件，然后使用fs模块读取 css 文件内容。
2、创建 style 标签，将index.css中的内容拷贝进style标签
3、将style标签插入到 index.html 的head标签中。
4、将该css文件中的内容直接替换为js脚本（方便热更新或css模块化），同时设置Content-type为js，从而让浏览器以JS脚本的形式来执行该css后缀的文件。

二、css 模块化
1、css文件以 module.css结尾（module是一个规范，表示需要开启css模块化）

/* 新建一个main.module.css文件 */
.footer {
  width: 100px;
  height: 100px;
}

2、它会将所有类名进行一定规则的替换。比如：

/* vite 会把 main.module.css文件内容替换为如下 */
._footer_1wr6r_1 {
  width: 100px;
  height: 100px;
};

3、并且会创建一个映射对象。

import main from "./main.module.css";
console.log(main); // { footer: '_footer_1wr6r_1' }

4、将替换后的内容塞进style标签，然后放入head标签中。

5、将main.module.css内容进行全部抹除，替换为JS脚本。
6、将创建的映射对象在脚本中进行默认导出。

css 在vite.config.js 相关配置如下：

import { defineConfig, loadEnv } from "vite";

export default defineConfig({
  css: {
    // modules配置最终会丢给 postcss modules 
    modules: {
      // 驼峰，中划线
      // camelCaseOnly： header-content类 转化为 headerContent
      // camelCase：header-content类 转化为 header-content，headerContent
      localsConvention: "camelCase",

      // global 全局
      // local  局部，开启模块化
      scopeBehaviour: "local",

      // 生成类名（方式1）
      // generateScopedName: "[name]_[local]_[hash:5]",
      // 生成类名（方式2）
      // generateScopedName(name, filename, css) {
      //   // name：css文件类名
      //   // filename：当前文件的绝对路径
      //   // css：当前文件的样式
      //   return `${name}_${Math.random(0, 1)}`
      // },

      // hashPrefix：生成hash会根据你的类名去进行生成。如果要生成的hash更加独特，可以配置hashPrefix。
      hashPrefix: "hello",

      globalModulePaths: ["./src/app.module.css"],  // 不参与css模块化的路径
    },
    preprocessorOptions: {  // key： 预处理器名
      // less 配置
      less: {
        math: "always",
        globalVars: {   // 设置全局变量
          mainColor: "red"
        }
      },
      // sass 配置
      sass: {}
    },
    // 文件索引，用于定位样式具体位置
    devSourcemap: true
  },
});

postcss

1、postcss 用于对 css 高级语法进行降级。
2、前缀补全，兼容不同浏览器。

一、新建 postcss.config.js配置文件。
postcss-low-level：语法降级
postcss-compiler：编译插件
postcss-preset-env：该插件一次性把必须的插件都给你装上（包含以上两种）。

// postcss.config.js 配置文件。
const postcssPresetEnv = require("postcss-preset-env");
module.exports = {
  plugin: [postcssPresetEnv(/* pluginOptions */)]
}

别名配置

import { defineConfig} from "vite";
import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@assets": path.resolve(__dirname, "./assets/images")
    }
  }
});

文件打包配置

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 打包后文件命名
        assetFileNames: "[hash].[name].[ext]"
      }
    },
    // 图片大小分界线：大于 4kb，图片正常打包。小于 4kb，图片会转化为 base64。
    assetsInlineLimit: 4096,  // 4kb
    // 打包后名称，默认是 dist
    outDir: "testDir",
    // 打包后静态目录名称
    assetsDir: "static"
  }
})