feat: render index html

c0dedance · Oct 12, 2023 · 1f3a4c5 · 1f3a4c5
1 parent 4200d39
commit 1f3a4c5
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 1 deletion.
diff --git a/src/node/cli.ts b/src/node/cli.ts
@@ -1,4 +1,4 @@
-import path = require("path");
+import * as path from "path";
 import { cac } from "cac";
 import { createDevServer } from "./dev";
 

diff --git a/src/node/constant/index.ts b/src/node/constant/index.ts
@@ -0,0 +1,5 @@
+import * as path from "path";
+
+export const ROOT = path.resolve(__dirname, "../../../");
+
+export const DEFAULT_HTML_PATH = path.resolve(ROOT, "template.html");
diff --git a/src/node/dev.ts b/src/node/dev.ts
@@ -1,8 +1,10 @@
 import { createServer as createViteDevServer } from "vite";
+import { pluginIndexHtml } from "./plugin-r-press/indexHtml";
 
 
 export function createDevServer(root: string = process.cwd()) {
   return createViteDevServer({
     root,
+    plugins: [pluginIndexHtml()]
   })
 }
diff --git a/src/node/plugin-r-press/indexHtml.ts b/src/node/plugin-r-press/indexHtml.ts
@@ -0,0 +1,28 @@
+import { readFile } from "fs/promises";
+import { Plugin } from "vite";
+import { DEFAULT_HTML_PATH } from "../constant";
+
+
+export function pluginIndexHtml(): Plugin {
+  return {
+    name: 'r-press:index-html',
+    // 不在函数题体直接插入中间件，而是在configureServer中插入？
+    // 防止影响vite的逻辑
+    configureServer(server) {
+      server.middlewares.use(async (req, res, next) => {
+        if (req.url !== '/') {
+          return next();
+        }
+        const htmlContent = await readFile(DEFAULT_HTML_PATH, 'utf-8');
+
+        try {
+          res.statusCode = 200;
+          res.setHeader("Content-Type", "text/html");
+          res.end(htmlContent);
+        } catch (e) {
+          return next(e);
+        }
+      })
+    }
+  }
+}
diff --git a/template.html b/template.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+  <div id="root">running~</div>
+</body>
+
+</html>