resolve.alias别名原理，简易版如何解析加载

孩子气呵呵特

于 2024-05-14 15:16:51 发布

阅读量247

点赞数 1

分类专栏： vite 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_39755186/article/details/138856503

版权

vite 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vite.vonfig.js 中会配置别名, 简易版module.exports直接到处别名

const path = require("path");
module.exports = {
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
};

项目跟目录下建立一个index.js文件，使用nodejs启动这个文件，在浏览器访问这个服务localhost:5173

const Koa = require("koa");

const fs = require("fs");

const path = require("path");
// 获取 vite.config.js 里的配置文件
const viteConfig = require("./vite.config.js");
// 获取 aliasResolve 暴露出的函数
const aliasResolve = require("./aliasResolve.js");

const app = new Koa();

app.use(async (ctx) => {
  // 判断 访问的url
  if (ctx.request.url === "/") {
    // 读取html文件
    const html = await fs.promises.readFile("index.html");
    // console.log("string:", html.toString());
    ctx.response.body = html;
    ctx.response.set("Content-Type", "text/html");
  }
  // 判断若是js结尾，则走进来
  if (ctx.request.url.endsWith(".js")) {
    // 读取main.js 文件内容 获取到的是 buffer 
    const mainJs = fs.readFileSync(
      path.resolve(__dirname, "." + ctx.request.url)
    );
    // console.log("mainJs", mainJs);
    // console.log(aliasResolve());
    // mainJs 是 Buffer 需要使用toString，转换成字符串
    const lastJsContent = aliasResolve(
      viteConfig.resolve.alias, // 配置的别名
      mainJs.toString() // 需要转换的别名
    );
    ctx.response.body = lastJsContent;
    // 通过js方式加载
    ctx.response.set("Content-Type", "text/javascript");
  }
});

app.listen(5173, () => {
  console.log("running vite dev server is port 5173");
});

main.js 文件

//  只是为了转换别名@符号，所以不用写太多代码
import '@/tests.js'

aliasResolve.js 别名转换函数,默认test是在src目录下放着

module.exports = function (aliasConfig, jsContent) {
  const entries = Object.entries(aliasConfig);
  let lastJsContent = jsContent;
  entries.forEach((entrie) => {
    const [alias, path] = entrie;
    // console.log("alias:", alias);
    // console.log("path:", path);
    // 在这里默认是src文件夹，
    const index = path.indexOf("/src");
    const relPath = path.slice(index, path.length);
    lastJsContent = jsContent.replace(alias, relPath);
  });
  return lastJsContent;
};

index.html 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    vite dev server 解释识别.vue 文件
    <script src="./src/main.js" type="module"></script>
  </body>
</html>