可以构建一个不依赖 Webpack、Vite 等打包工具的现代化单页应用（SPA），完全使用原生 ES 模块（ESM）和现代浏览器能力。关键在于利用浏览器原生支持的 J*aScript 模块、动态导入 和 前端路由 机制。

1. 使用原生 ES 模块作为基础

现代浏览器支持通过 <script type="module"></script> 直接加载模块化 J*aScript，无需打包。每个文件都可以使用 import 和 export。

HTML 入口示例：

<script type="module">
  import { router } from './router.js';
  router();
</script>

模块路径需写明文件后缀（如 ./utils.js），这是 ESM 的硬性要求。

2. 实现基于 URL 的前端路由

通过监听 popstate 事件和拦截链接跳转，实现无刷新页面切换。

简单路由逻辑：

• 监听点击带有 data-link 的链接，阻止默认跳转，用 history.pushState() 更新 URL
• 监听 window.popstate 处理前进后退
• 根据当前路径动态导入并渲染对应页面模块

示例代码片段：

// router.js
export async function router() {
  const routes = {
    '/': () => import('./pages/home.js'),
    '/about': () => import('./pages/about.js')
  };

  const path = window.location.pathname;
  const route = routes[path] || routes['/'];
  const page = await route();
  document.getElementById('app').innerHTML = page.render();
}

3. 动态导入页面与组件

利用 import() 表达式按需加载模块，实现代码分割效果。

每个页面导出一个 render() 方法：

青泥学术AI写作辅助平台

// pages/home.js
export function render() {
  return '<h1>Home Page</h1>';
}

组件也可模块化拆分，例如：

// components/Header.js
export function Header() {
  return '<header>My App</header>';
}

4. 静态资源服务与开发体验

不需要打包，但仍需一个本地服务器支持 ESM 加载（避免 CORS 问题）。

推荐使用：

• npx serve 或 npx http-server 快速启动
• 或使用 python -m http.server

生产环境可部署到任何静态托管平台（如 Netlify、Vercel、GitHub Pages）。

5. 处理样式与状态管理

CSS 可通过动态创建 <style></style> 标签注入，或使用 import './style.css' （部分浏览器支持）。

状态管理可通过模块级变量 + 发布订阅模式实现轻量控制：

// store.js
let state = { count: 0 };
const listeners = [];

export function setState(newState) {
  state = { ...state, ...newState };
  listeners.forEach(fn => fn());
}

export function subscribe(fn) {
  listeners.push(fn);
  return () => {
    const index = listeners.indexOf(fn);
    listeners.splice(index, 1);
  };
}

基本上就这些。虽然没有打包工具的便捷功能（如热更新、自动补全），但结构清晰、调试直接、学习成本低，适合中小型项目或教学用途。