手把手教你手写 Vite Server（二）—— 插件架构设计

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createRouter } from 'vue-router'

const pinia = createPinia()
const router = createRouter()
const app = createApp({})

// vue-router 插件
app.use(router)
// pinia 插件
app.use(pinia)

app.mount('#app')

// plugins/i18n.js
export default {
  install: (app, options) => {
    // 支持 $translate('x,y,z')，视为读取 options.x.y.z
    app.config.globalProperties.$translate = key => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }

    app.provide('i18n', options)
  }
}

// src/node/server/plugin.ts
export interface Plugin {}

// src/node/plugins/index.ts
export function loadInternalPlugins(): Plugin[] {
  return [
      // 内部插件一
    // 内部插件二
    // 内部插件三 
    // ……    
  ];
}

// src/node/server/index.ts
export async function createServer() {
    
  const plugins = loadInternalPlugins();
  const app = connect();

  // server 作为上下文对象，用于保存一些状态和对象，将会在 Server 的各个流程中被使用
  const server: ViteDevServer = {
    plugins,
    app,
  };
}

export async function createServer() {
  const app = connect();

  app.use(transformMiddleware());
  app.use(cssMiddleware());
  app.use(staticMiddleware());

  http.createServer(app).listen(3000);

  console.log('open http://localhost:3000/');
}

export type ServerHook = (server: ViteDevServer) => void | Promise<void>;

export interface Plugin {
  configureServer?: ServerHook;
}

export async function createServer() {
  const plugins = loadInternalPlugins();
  const app = connect();

  // server 对象，作为上下文对象，用于保存一些状态和对象，将会在 Dev Server 的各个流程中被使用
  const server: ViteDevServer = {
    plugins,
    app
  };

+  // 在创建 server 对象后，执行钩子
+  for (const plugin of plugins) {
+    plugin?.configureServer?.(server);
+  }

  http.createServer(app).listen(3000);

  console.log('open http://localhost:3000/');
}

import {Plugin} from '../server/plugin';
export function transformPlugin(): Plugin{
  return {
    configureServer(server){
      server.app.use(transformMiddleware());
    }
  };
}

import {Plugin} from '../server/plugin';
export function cssPlugin(): Plugin{
  return {
    configureServer(server){
      server.app.use(cssMiddleware());
    }
  };
}

import {Plugin} from '../server/plugin';
export function staticPlugin(): Plugin{
  return {
    configureServer(server){
      server.app.use(staticMiddleware());
    }
  };
}

export function loadInternalPlugins(): Plugin[]{
  return [
+    transformPlugin(),
+    cssPlugin(),
+    staticPlugin(),
  ];
}

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
      // 外部插件
  ],
});

// src/node/config.ts
import { pathToFileURL } from 'url';

// 配置的类型
export type ResolvedConfig = Readonly<{
  plugins?: Plugin[]
}>

export async function resolveConfig(): Promise<ResolvedConfig>{
  const configFilePath = pathToFileURL(resolve(process.cwd(), './vite.config.js'));
  const config = await import(configFilePath.href);
  return config.default.default;
}

export async function createServer() {
+ const config = await resolveConfig();

- const plugins = loadInternalPlugins();
+ const plugins = [...(config.plugins || []), ...loadInternalPlugins()];
  const app = connect();

  // server 作为上下文对象，用于保存一些状态和对象，将会在 Server 的各个流程中被使用
  const server: ViteDevServer = {
    plugins,
    app,
+   config,
  };

  for (const plugin of plugins) {
    plugin?.configureServer?.(server);
  }

  http.createServer(app).listen(3000);

  console.log('open http://localhost:3000/');
}

export interface UserConfig {
  root?: string;
  plugins?: Plugin[];
}

export type UserConfigExport = UserConfig;

export function defineConfig(config: UserConfigExport) {
  return config;
}

export function lessPlugin(): Plugin {
  return {
    configureServer(server) {
      server.app.use(lessMiddleware());
    },
  };
}

import postcss from 'postcss';
import atImport from 'postcss-import';
import less from 'less';
import {dirname} from 'path';

function lessMiddleware(): NextHandleFunction {
  return async function viteLessMiddleware(req, res, next) {
    if (req.method !== 'GET') {
      return next();
    }

    const url: string = cleanUrl(req.url!);

    if (isLessRequest(url)) {
      // 解析文件路径
      const filePath = url.startsWith('/') ? '.' + url : url;
      // 读取文件，获取代码的字符串
      const rawCode = await readFile(filePath, 'utf-8');

      // 预处理器处理 less
      const lessResult = await less.render(rawCode, {
        // 用于 @import 查找路径
        paths: [dirname(filePath)]
      });
      // 后处理器处理 css
      const postcssResult = await postcss([atImport()]).process(lessResult.css, {
        from: filePath,      // 用于 @import 查找路径
        to: filePath,        // 用于 @import 查找路径
      });

      res.setHeader('Content-Type', 'application/javascript');
      return res.end(`
        var style = document.createElement('style')
        style.setAttribute('type', 'text/css')
        style.innerHTML = \`${postcssResult.css} \`
        document.head.appendChild(style)
      `);
    }

    next();
  };
}

// less-test.less
@import "style-imported.css";
body{
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
}

// less-import.less
@fontSize: 50px;

import './style/less-test.less';

import { defineConfig } from 'my-vite-middleware-plugins';
import { lessPlugin } from './plugins/less';

export default defineConfig({
  plugins: [lessPlugin()],
});