Vite插件【md文件渲染为js文件】的技术栈vite插件

编写一个基于vite的插件，该插件将md文件渲染为js文件。

尤达用这种方式描述了维特：

“基于浏览器的本机ES导入的开发服务器。

使用浏览器解析导入，在服务器端按需编译和返回，完全跳过了打包的概念，

服务器可以使用了。

同时，它不仅支持Vue文件，而且还修复了热更新，并且随着模块数量的增加，热更新速度不会降低。

对于生产环境，相同的代码可以与汇总一起打包。 “

此博客的作者希望共享用于编写Vite插件的技术堆栈[将md文件呈现为js文件]：md插件源代码地址

相关文章技术堆栈Vite插件概念

在撰写本文时，尚无有关如何编写Vite插件的官方文档。因此，目前，您只能通过阅读Vite源代码来了解有关如何编写插件的更多信息。

我们需要首先阐明一些相关概念，以方便后续工作：

但是其他文件类型的导入无法直接处理。每次浏览器在代码中导入时，都会由Vite的开发服务器进行编译，然后直接提供给浏览器。

例如：* .vue文件将首先在开发服务器上编译，然后发送到浏览器。

这些导入可以是javascript，vue，css文件。也可以是其他类型的文件，但需要在vite中指定变异工具。

这就是Vite开发服务器如此有用的原因-它解决了浏览器的局限性。

创建初始插件

Vite插件只是一个对象，我们可以先返回一个空对象。

创建一个用作插件的js文件plugins / md.ts：

export function md()  {
 return {}
}

然后，在vite.config.js中像这样使用它：

import { md } from "./plugins/md";
export default {
  plugins: [md()],
}

一个细心的朋友可能会发现我们导出的是函数而不是对象。这是为了方便将来在插件中添加自定义选项。

例如：如果要指定自定义MD文件样式功能，则可以执行viteAutoRoute（{h1_color：'red'}）

开发环境

现在，让我们使用之前创建的md文件。

使用vite插件的configureServer选项：

// @ts-nocheck
import path from "path";
import fs from "fs";
import marked from "marked";
const mdToJs = (str) => {
  const content = JSON.stringify(marked(str));
  return `export default ${content}`;
};
export function md() {
  return {
    configureServer: [
      // 用于开发
      async ({ app }) => {
        app.use(async (ctx, next) => {
          // koa
          if (ctx.path.endsWith(".md")) {
            ctx.type = "js";
            const filePath = path.join(process.cwd(), ctx.path);
            ctx.body = mdToJs(fs.readFileSync(filePath).toString());
          } else {
            await next();
          }
        });
      },
    ]
  };
}

首先，创建一个函数mdToJs，其中包含路由js文件的必需内容。主要功能是使用marked.js库将字符串呈现为标准md文件。然后，我们在vite开发服务器中为中间件创建一个configureServer数组。

每当vite导入javascript或vue文件时，它都会向该文件发送一个请求到其dev服务器，必要时执行一些转换，然后以浏览器可以处理的形式将其发送回去。

遇到诸如来自“ ./markdown/intro.md”的导入简介之类的信息时，

这将要求文件扩展名为.md。

因此，我们要做的是拦截请求并返回我们生成的moduleContent的主体，并将其类型声明为js。

最后，我们将此configureServer数组添加到返回的对象中，以供Vite使用。

看到这一点后，Vite将我们的列表（总共1个）中间件与自己的中间件合并。

现在，我们可以在Markdowm组件中使用以下md文件：

<template>
  <article class="markdown-body" v-html="content">article>
template>
<script lang="ts">
import { ref } from "vue";
export default {
  props: {
    content: {
      type: String,
      required: true,
    },
  },
};
script>

现在，我们可以运行yarn开发，以查看路由的工作方式：3000 /＃/ doc / intro。

生产环境

但是，当我们运行yarn build时，它将不使用我们刚刚完成的configureServer，因为在生产环境中，它使用汇总编译而不是Vite的dev服务器。

因此，我们需要添加一些其他配置以使其在生产环境中正常工作：

// @ts-nocheck
import path from "path";
import fs from "fs";
import marked from "marked";
const mdToJs = (str) => {
  const content = JSON.stringify(marked(str));
  return `export default ${content}`;
};
export function md() {
  return {
	// 这块是之前定义的 configureServer 代码
    transforms: [
      {
        // 用于 rollup // 插件
        test: (context) => context.path.endsWith(".md"),
        transform: ({ code }) => mdToJs(code),
      },
    ],
  };
}

在这里，我们使用了vite插件的transforms选项。这使我们能够定义汇总的插件功能。

我们使用带有.md后缀的模块，并返回所需的js内容。

实质上，它与开发服务器具有相同的作用。

现在，我们的自动路由可以在本地开发和生产环境中使用。

路线渲染

插件完成后，将通过h函数呈现到相应页面。

import Intro from "./markdown/intro.md";
import Install from "./markdown/install.md";
import Getstarted from "./markdown/get-started.md";
import { h } from "vue";
import Markdown from "./components/Markdown.vue";
const md = (string) => h(Markdown, { content: string, key: string });
const history = createWebHashHistory();
export const router = createRouter({
  history: history,
  routes: [
    { path: "/", component: Home },
    {
      path: "/doc",
      component: Doc,
      children: [
        { path: "", redirect: "/doc/intro" },
        { path: "intro", component: md(Intro) },
        { path: "get-started", component: md(Getstarted) },
        { path: "install", component: md(Install) },
      ],
    },
  ],
});

摘要

希望您能了解Vite的工作原理以及如何编写一些基本的插件。

以下是完整功能代码的地址：

Kaite-ui官方网站页面：

github开源地址：github开源地址

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-349922-1.html