ESA支持多种主流前端框架与构建工具,无论是构建静态网站、单页应用,还是服务端渲染项目,无需手动设置构建命令或输出目录,均可实现一键部署、自动构建、将代码提交到全球加速访问的全流程。
Vite+React.js
Vite 作为前端构建工具,具备极快的冷启动速度和即时的热模块替换特点。结合 React.js 可快速构建高性能的单页应用,适合于开发复杂的用户界面。相比传统 Webpack 构建,Vite 利用浏览器对 ES Modules 的原生支持,显著提升开发体验。
默认构建设置:
构建命令:
npm run build
开发启动命令:
npm run dev
静态资源目录:
./dist
Vite+Vue.js
Vite 结合 Vue.js 3可实现极速的开发体验。Vue 官方推荐使用 Vite 作为脚手架工具之一,@vitejs/plugin-vue
提供了对 .vue
文件、JSX、服务端渲染SSR等的开箱即用支持。
默认构建设置:
构建命令:
npm run build
开发启动命令:
npm run dev
静态资源目录:
./dist
Next.js
Next.js 是一个基于 React 的全栈前端框架,提供开箱即用的服务器端渲染、静态生成、增量静态再生以及 API 路由功能,支持 React Server Components 和 App Router 架构,极大提升了应用的首屏加载性能与 SEO 表现。Next.js 内置基于 Rust 的快速打包工具 Turbopack 和 Webpack 5,结合文件系统路由,实现极速开发服务器启动与热更新,为 React 应用提供了卓越的开发体验。目前ESA只支持静态站点生成模式
默认构建设置:
构建命令:
npm run build
开发启动命令:
npm run dev
静态资源目录:
./out
(可参考配置示例)
React Router
React Router 是 React 生态中最流行的前端路由库,专为单页应用设计,支持声明式路由、动态路由匹配、嵌套路由和编程式导航。自 v6 版本起,React Router 采用更简洁的 API 设计,强调组件化配置与最佳实践,提升了应用的可维护性与性能。它与 React 无缝集成,支持函数式组件与 Hooks(如 useNavigate
、useParams
、useLocation
),适用于管理复杂的客户端路由逻辑。
默认构建设置:
构建命令:由主项目决定(如
npm run build
)开发启动命令:由主项目决定(如
npm run dev
)静态资源目录:由主项目决定(如
./build/client
)
Astro
Astro 是一个现代化的轻量级前端框架,专注于构建极快的静态网站和内容驱动型应用。其核心理念是岛屿架构(Islands Architecture)——默认只发送最少的 JavaScript 到客户端,仅在需要交互的地方按需激活组件(如 React、Vue、Svelte 组件),从而极大提升首屏加载速度与性能表现。Astro 支持多框架共存,允许在同一个项目中使用不同 UI 框架的组件,同时输出纯 HTML、CSS 和极简 JS,实现接近零成本的交互性。
默认构建设置:
构建命令:
npm run build
开发启动命令:
npm run dev
静态资源目录:
./dist
Nuxt
Nuxt 是基于 Vue.js 的全栈前端框架,专为构建服务端渲染、静态生成和单页应用而设计。自 Nuxt 3 起,框架全面拥抱 Vue 3、Vite 和 Nitro 引擎,实现极速开发体验与高度可扩展的服务端逻辑。Nuxt 支持基于文件系统的自动路由、组件自动导入、模块化插件体系以及内置的 API 层、TypeScript、ESLint、PWA 等功能,可显著提升开发效率与项目可维护性。
默认构建设置:
构建命令:
npm run build
开发启动命令:
npm run dev
静态资源目录:
./dist
React Chatbot
React Chatbot 是基于 React 构建的对话式用户界面解决方案,通常结合状态管理(如 Redux 或 Context API)、自然语言处理服务与后端 AI 模型(如 LLM、Dialogflow、Rasa)实现智能交互。它采用组件化架构,支持高度定制化的 UI 设计、多轮对话逻辑控制、富媒体消息展示(文本、卡片、按钮、图片等),并可通过 WebSocket 或 REST API 实现实时通信。
默认构建设置:
构建命令:
npm run build
开发启动命令:
npm run start
或npm run dev
静态资源目录:
./dist
Gatsby
Gatsby 是一个基于 React 的静态站点生成器,专为构建高性能、SEO 友好的现代网站而设计。它通过 GraphQL 统一从多种数据源(本地文件、CMS、API、Markdown、Contentful 等)提取内容,在构建时预渲染为静态 HTML、CSS 和 JavaScript 文件,实现极致的加载速度和搜索引擎优化效果。Gatsby 支持插件化扩展体系(如 gatsby-plugin-image
、gatsby-source-contentful
)、热重载开发体验、PWA 支持及自动代码分割,无缝集成 TypeScript,广泛用于内容驱动型网站的快速开发。
默认构建设置:
构建命令:
npm run build
开发启动命令:
npm run develop
静态资源目录:
./public
svelte
Svelte 是一种新型前端框架,其核心理念是“在编译时完成工作”,而非运行时。与 React 或 Vue 不同,Svelte 不依赖虚拟 DOM,而是将组件逻辑直接编译为高效原生 JavaScript,在运行时几乎没有框架开销,显著提升性能并减少包体积。Svelte 提供极简语法(声明式赋值、反应性 $:
符号)、内置动画支持、上下文 API 和灵活的状态管理机制。其进阶形态 SvelteKit 更进一步,提供了路由、服务端渲染、静态生成、API 路由等全栈能力,成为轻量级但功能完整的现代 Web 框架。
默认构建设置:
构建命令:
npm run build
(SvelteKit)开发启动命令:
npm run dev
静态资源目录:
./build