Vite 使用，及源码走读

import imgUrl from './img.png';
document.getElementById('hero-img').src = imgUrl;

// parallel, ignores returns
async function hookParallel<H extends AsyncPluginHooks & ParallelPluginHooks>(
  hookName: H,
  context: (plugin: Plugin) => ThisType<FunctionPluginHooks[H]>,
  args: (plugin: Plugin) => Parameters<FunctionPluginHooks[H]>,
): Promise<void> {
  const parallelPromises: Promise<unknown>[] = []
    for (const plugin of getSortedPlugins(hookName)) {
      // Don't throw here if closed, so buildEnd and closeBundle hooks can finish running
      const hook = plugin[hookName]
      if (!hook) continue

      const handler: Function = getHookHandler(hook)
      if ((hook as { sequential?: boolean }).sequential) {
        await Promise.all(parallelPromises)
        parallelPromises.length = 0
        await handler.apply(context(plugin), args(plugin))
      } else {
        parallelPromises.push(handler.apply(context(plugin), args(plugin)))
      }
  }
  await Promise.all(parallelPromises)
}

import fs from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import express from 'express';
import { createServer as createViteServer } from 'vite';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

async function createServer() {
	const app = express();

	// 以中间件模式创建 Vite 应用，并将 appType 配置为 'custom'
	// 这将禁用 Vite 自身的 HTML 服务逻辑
	// 并让上级服务器接管控制
	const vite = await createViteServer({
		server: { middlewareMode: true },
		appType: 'custom'
	});

	// 使用 vite 的 Connect 实例作为中间件
	// 如果你使用了自己的 express 路由（express.Router()），你应该使用 router.use
	// 当服务器重启（例如用户修改了 vite.config.js 后），
	// `vite.middlewares` 仍将保持相同的引用
	// （带有 Vite 和插件注入的新的内部中间件堆栈）。
	// 即使在重新启动后，以下内容仍然有效。
	app.use(vite.middlewares);

	app.use('*', async (req, res) => {
		// 服务 index.html - 下面我们来处理这个问题
		const url = req.originalUrl;

		try {
			// 1. 读取 index.html
			let template = fs.readFileSync(
				path.resolve(__dirname, 'index.html'),
				'utf-8'
			);

			// 2. 应用 Vite HTML 转换。这将会注入 Vite HMR 客户端，
			//    同时也会从 Vite 插件应用 HTML 转换。
			//    例如：@vitejs/plugin-react 中的 global preambles
			template = await vite.transformIndexHtml(url, template);

			// 3. 加载服务器入口。vite.ssrLoadModule 将自动转换
			//    你的 ESM 源码使之可以在 Node.js 中运行！无需打包
			//    并提供类似 HMR 的根据情况随时失效。
			const { render } = await vite.ssrLoadModule('/src/entry-server.js');

			// 4. 渲染应用的 HTML。这假设 entry-server.js 导出的 `render`
			//    函数调用了适当的 SSR 框架 API。
			//    例如 ReactDOMServer.renderToString()
			const appHtml = await render(url);

			// 5. 注入渲染后的应用程序 HTML 到模板中。
			const html = template.replace(`<!--ssr-outlet-->`, appHtml);

			// 6. 返回渲染后的 HTML。
			res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
		} catch (e) {
			// 如果捕获到了一个错误，让 Vite 来修复该堆栈，这样它就可以映射回
			// 你的实际源码中。
			vite.ssrFixStacktrace(e);
			next(e);
		}
	});

	app.listen(5173);
}

createServer();

"devDependencies": {
	"@vitejs/plugin-vue": "^5.0.5",
	"typescript": "^5.2.2",
	"vite": "file:../vite-src/packages/vite",
	"vue-tsc": "^2.0.24"
}

/*
source code:
vite/src/node/cli.ts
*/

cli
	.command('[root]', 'start dev server') // default command
	.alias('serve') // the command is called 'serve' in Vite's API
	.alias('dev') // alias to align with the script name
	.option('--host [host]', `[string] specify hostname`, { type: [convertHost] })
	.option('--port <port>', `[number] specify port`)
	.option('--open [path]', `[boolean | string] open browser on startup`)
	.option('--cors', `[boolean] enable CORS`)
	.option('--strictPort', `[boolean] exit if specified port is already in use`)
	.option(
		'--force',
		`[boolean] force the optimizer to ignore the cache and re-bundle`
	)
	.action(async (root: string, options: ServerOptions & GlobalCLIOptions) => {
		filterDuplicateOptions(options);
		// output structure is preserved even after bundling so require()
		// is ok here
		const { createServer } = await import('./server');
		try {
			const server = await createServer({
				root,
				base: options.base,
				mode: options.mode,
				configFile: options.config,
				logLevel: options.logLevel,
				clearScreen: options.clearScreen,
				optimizeDeps: { force: options.force },
				server: cleanOptions(options)
			});

			if (!server.httpServer) {
				throw new Error('HTTP server not available');
			}

			await server.listen();

			const info = server.config.logger.info;

			// Profiler 服务管理以及快捷键绑定
		} catch (e) {
			const logger = createLogger(options.logLevel);
			logger.error(colors.red(`error when starting dev server:\n${e.stack}`), {
				error: e
			});
			stopProfiler(logger.info);
			process.exit(1);
		}
	});

/*
source code:
vite/src/node/server/index.ts
*/

const onHMRUpdate = async (
	type: 'create' | 'delete' | 'update',
	file: string
) => {
	if (serverConfig.hmr !== false) {
		try {
			await handleHMRUpdate(type, file, server);
		} catch (err) {
			hot.send({
				type: 'error',
				err: prepareError(err)
			});
		}
	}
};

watcher.on('change', async (file) => {
	file = normalizePath(file);
	await container.watchChange(file, { event: 'update' });
	// invalidate module graph cache on file change
	moduleGraph.onFileChange(file);
	await onHMRUpdate('update', file);
});

import { createHotContext as __vite__createHotContext } from '/@vite/client';
import.meta.hot = __vite__createHotContext('/src/style.css');

import {
	updateStyle as __vite__updateStyle,
	removeStyle as __vite__removeStyle
} from '/@vite/client';
const __vite__id =
	'/Users/samuelzhaoy/Private/projects/vite/demo/src/style.css';
const __vite__css =
	':root {\n  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n  line-height: 1.5;\n  font-weight: 400;\n\n  color-scheme: light dark;\n  color: rgba(255, 255, 255, 0.87);\n  background-color: #242424;\n\n  font-synthesis: none;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\na {\n  font-weight: 500;\n  color: #646cff;\n  text-decoration: inherit;\n}\na:hover {\n  color: #535bf2;\n}\n\nbody {\n  margin: 0;\n  display: flex;\n  place-items: center;\n  min-width: 320px;\n  min-height: 100vh;\n}\n\nh1 {\n  font-size: 3.2em;\n  line-height: 1.1;\n}\n\nbutton {\n  border-radius: 8px;\n  border: 1px solid transparent;\n  padding: 0.6em 1.2em;\n  font-size: 1em;\n  font-weight: 500;\n  font-family: inherit;\n  background-color: #1a1a1a;\n  cursor: pointer;\n  transition: border-color 0.25s;\n}\nbutton:hover {\n  border-color: #646cff;\n}\nbutton:focus,\nbutton:focus-visible {\n  outline: 4px auto -webkit-focus-ring-color;\n}\n\n.card {\n  padding: 2em;\n}\n\n#app {\n  max-width: 1280px;\n  margin: 0 auto;\n  padding: 2rem;\n  text-align: center;\n}\n\n@media (prefers-color-scheme: light) {\n  :root {\n    color: #213547;\n    background-color: #ffffff;\n  }\n  a:hover {\n    color: #747bff;\n  }\n  button {\n    background-color: #f9f9f9;\n  }\n}\n';
__vite__updateStyle(__vite__id, __vite__css);
import.meta.hot.accept();
import.meta.hot.prune(() => __vite__removeStyle(__vite__id));

import { createHotContext as __vite__createHotContext } from '/@vite/client';
import.meta.hot = __vite__createHotContext('/src/components/FooComponent.vue');
import { defineComponent as _defineComponent } from '/node_modules/.vite/deps/vue.js?v=763c69f2';
import { ref } from '/node_modules/.vite/deps/vue.js?v=763c69f2';
import '/src/styles/FooComponent.css';
const _sfc_main = /* @__PURE__ */ _defineComponent({
	__name: 'FooComponent',
	setup(__props, { expose: __expose }) {
		__expose();
		const item = ref('Edit');
		const __returned__ = { item };
		Object.defineProperty(__returned__, '__isScriptSetup', {
			enumerable: false,
			value: true
		});
		return __returned__;
	}
});
import {
	toDisplayString as _toDisplayString,
	createElementVNode as _createElementVNode,
	vModelText as _vModelText,
	withDirectives as _withDirectives,
	Fragment as _Fragment,
	openBlock as _openBlock,
	createElementBlock as _createElementBlock
} from '/node_modules/.vite/deps/vue.js?v=763c69f2';
const _hoisted_1 = { class: 'read-the-docs' };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
	return (
		_openBlock(),
		_createElementBlock(
			_Fragment,
			null,
			[
				_createElementVNode(
					'p',
					_hoisted_1,
					_toDisplayString('content : ' + $setup.item),
					1
					/* TEXT */
				),
				_withDirectives(
					_createElementVNode(
						'input',
						{
							class: 'input',
							type: 'text',
							'onUpdate:modelValue':
								_cache[0] || (_cache[0] = ($event) => ($setup.item = $event))
						},
						null,
						512
						/* NEED_PATCH */
					),
					[[_vModelText, $setup.item]]
				)
			],
			64
			/* STABLE_FRAGMENT */
		)
	);
}
_sfc_main.__hmrId = '8d1f73c4';
typeof __VUE_HMR_RUNTIME__ !== 'undefined' &&
	__VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main);
import.meta.hot.accept((mod) => {
	if (!mod) return;
	const { default: updated, _rerender_only } = mod;
	if (_rerender_only) {
		__VUE_HMR_RUNTIME__.rerender(updated.__hmrId, updated.render);
	} else {
		__VUE_HMR_RUNTIME__.reload(updated.__hmrId, updated);
	}
});
import _export_sfc from '/@id/__x00__plugin-vue:export-helper';
export default /* @__PURE__ */ _export_sfc(_sfc_main, [
	['render', _sfc_render],
	['__file', '.../src/components/FooComponent.vue']
]);

//# sourceMappingURL=data:application/json;base64,...