手写vite-alias插件

整个插件就是在vite不同的生命周期中干不同的事情

手写vite-alias其实就是抢在vite.config.js配置文件执行之前，去改写vite.config.js配置文件。

项目根目录下src中建立plugins文件夹，在建立ViteAlias.js文件

// 必须给vite返回一个对象

const fs = require("fs");
const path = require("path");

function diffDirAndFile(dirFilesArr = [], basePath = "") {
  const result = {
    dirs: [],
    files: [],
  };
  dirFilesArr.forEach((name) => {
    const curFileState = fs.statSync(
      path.resolve(__dirname, basePath + "/" + name)
    );
    const isDir = curFileState.isDirectory();
    if (isDir) {
      result.dirs.push(name);
    } else {
      result.files.push(name);
    }
  });
  return result;
}

function getTotalSrcDir(keyName) {
  // 获取这个目录下的所有文件及文件夹
  console.log("====", path.resolve(__dirname, "../"));
  // 当前是在plugins文件夹目录下，/vite/src/plugins 所以拼接的时候需要往上返一层
  const result = fs.readdirSync(path.resolve(__dirname, "../"));

  const diffResult = diffDirAndFile(result, "../");

  const resolveAliasObj = {};
  diffResult.dirs.forEach((dirName) => {
    const key = `${keyName}${dirName}`;
    const absPath = path.resolve(__dirname, "../" + dirName);
    resolveAliasObj[key] = absPath;
  });
  return resolveAliasObj;
}

module.exports = ({ keyName = "@" } = {}) => {
  return {
    /**
     *
     * @param {*} config 目前vite.config.js 离的配置文件，只是拿到里面内容，不去执行配置文件
     * @param {*} env 有两个参数mode（表示是生产还是开发环境），command（执行的是dev还是build）
     */
    config(config, env) {
      const resolveAliasObj = getTotalSrcDir(keyName);
      return {
        // 在这里需要返回一个resolve出去，将src下面的所有文件进行别名控制
        resolve: {
          alias: resolveAliasObj,
        },
      };
    },
  };
};

vite.config.js配置文件中引用

import { defineConfig } from "vite";
const MyVite = require("./src/plugins/Vitealias.js");
export default defineConfig({
  envPrefix: "ENV_",
  plugins: [MyVite()],
});