Astro 多框架集成实战一个项目同时使用 React、Preact、Solid、Svelte 与 Vue【免费下载链接】astroThe web framework for content-driven websites. ⭐️ Star to support our work!项目地址: https://gitcode.com/GitHub_Trending/as/astro本篇基于 Astro 官方示例 examples/framework-multipleKitchen Sink: Microfrontends with Astro展开演示如何在一个 Astro 项目中同时接入五种前端框架的组件。读完后你将掌握如何通过 integrations 配置让多框架共存、include/exclude过滤器如何避免 Vite 插件之间的文件处理冲突以及各框架组件在 Astro 页面中导入与客户端加载的完整写法。一、示例定位Astro 的多框架原生支持该示例的核心主张只有一句话Astro 内置了对多个前端框架的支持可以在同一个项目中同时使用 React、Preact、Svelte 和 Vuev3.x甚至还能加上 Solid。README 中的关键说明是No configuration is needed to enable these frameworks—just start writing components insrc/components.也就是说框架集成能力来自 Astro 生态的官方集成包astrojs/react、astrojs/preact等只需在astro.config.mjs中注册即可不需要额外脚手架或构建工具改造。用一条命令创建项目官方提供了framework-multiple模板可以直接创建此示例项目npm create astrolatest -- --template framework-multiple项目目录结构如下摘自本仓库 examples/framework-multiple 实际文件examples/framework-multiple/ ├── astro.config.mjs # 注册五个框架集成 ├── package.json # 依赖五个框架 五个官方集成包 ├── tsconfig.json # 继承 astro/tsconfigs/strict └── src/ ├── components/ │ ├── preact/PreactCounter.tsx │ ├── react/ReactCounter.tsx │ ├── solid/SolidCounter.tsx │ ├── svelte/SvelteCounter.svelte │ └── vue/VueCounter.vue ├── pages/index.astro # 同页混用五种框架组件 └── styles/global.css每个框架组件都是一个结构相同的计数器一个-/按钮、一个pre显示计数外加一个接收插槽内容的消息区。五个组件在同一个首页上并排渲染直观验证多框架共存的可行性。二、核心配置integrations 与 include 过滤器多框架项目最关键的配置文件是 examples/framework-multiple/astro.config.mjs// ts-check import preact from astrojs/preact; import react from astrojs/react; import solid from astrojs/solid-js; import svelte from astrojs/svelte; import vue from astrojs/vue; import { defineConfig } from astro/config; // https://astro.build/config export default defineConfig({ // Enable many frameworks to support all different kinds of components. integrations: [ preact({ include: [**/preact/*] }), solid({ include: [**/solid/*] }), react({ include: [**/react/*] }), svelte(), vue(), ], });这里有几个值得注意的要点每个框架对应一个官方集成包通过integrations数组注册。从 examples/framework-multiple/package.json 可以看到当前示例使用的版本组合astrojs/preact^6.0.5、astrojs/react^6.0.5、astrojs/solid-js^7.0.2、astrojs/svelte^9.0.1、astrojs/vue^7.0.2同时安装了框架本体preact、react/react-dom、solid-js、svelte、vueNode 要求为22.12.0。用include把各 JSX 类框架的文件隔离到独立目录。示例中react({ include: [**/react/*] })、preact({ include: [**/preact/*] })、solid({ include: [**/solid/*] })各管各的目录。这一设计的原因在于React、Preact、Solid 三者都使用.tsx扩展名且 JSX 语义相近如onClick若不限制文件范围Vite 插件可能把 Preact 文件交给 React 编译器处理导致运行时错误。Svelte 和 Vue 不需要 include。Svelte 组件是独立的.svelte文件、Vue 是.vue文件扩展名天然不冲突因此直接svelte()、vue()即可。从源码结构看include参数确实会透传给底层的 Vite 框架插件在 packages/integrations/react/src/index.ts 中集成接收include/exclude选项后分别传给 Vite 的 React 插件编译范围控制与 Astro 的客户端岛处理链路该文件还会自动将.astro文件加入exclude注释说明在 Vite 8 中vitejs/plugin-react需要显式排除.astro文件保证 Astro 模板本身不会被 React 编译器误处理。三、页面层一个页面同时渲染五个框架的组件examples/framework-multiple/src/pages/index.astro 展示了五种框架组件在同一个 Astro 页面中的完整用法--- // Style Imports import ../styles/global.css; import { PreactCounter } from ../components/preact/PreactCounter; // Component Imports // For JSX components, all the common ways of exporting (under a namespace, // specific export, default export etc) are supported! import * as react from ../components/react/ReactCounter; import SolidCounter from ../components/solid/SolidCounter; import SvelteCounter from ../components/svelte/SvelteCounter.svelte; import VueCounter from ../components/vue/VueCounter.vue; --- html langen head meta charsetutf-8 / meta nameviewport contentwidthdevice-width / meta namegenerator content{Astro.generator} / link relicon typeimage/svgxml href/favicon.svg / link relicon href/favicon.ico / /head body main react.Counter client:visible h1Hello from React!/h1 /react.Counter PreactCounter client:visible h1Hello from Preact!/h1 /PreactCounter SolidCounter client:visible h1Hello from Solid!/h1 /SolidCounter VueCounter client:visible h1Hello from Vue!/h1 /VueCounter SvelteCounter client:visible h1Hello from Svelte!/h1 /SvelteCounter /main /body /html其中体现的两类要点JSX 组件的导入方式非常灵活。源码注释明确写道For JSX components, all the common ways of exporting (under a namespace, specific export, default export etc) are supported!。示例中 React 组件用了命名空间导入import * as react页面上写作react.CounterPreact/Solid 用常规命名/默认导入Svelte/Vue 直接按扩展名导入。client:visible客户端指令。五个计数器都需要交互统一使用client:visible当组件滚动进入视口时才加载对应的框架运行时并水合比无条件加载更省首屏成本。各框架的运行时React、Preact 等会被打包成独立的客户端岛只有在需要时才下载执行。页面样式由 examples/framework-multiple/src/styles/global.css 提供.counter用 CSS Grid 三列布局排列-、计数、。四、五个框架组件的实现对照每个组件都是一个计数器 插槽实现方式恰好覆盖各自框架的惯用语法适合作为跨框架速查对照。React显式指定 JSX 来源examples/framework-multiple/src/components/react/ReactCounter.tsx 第一行是/** jsxImportSource react */——在多框架项目中这一行至关重要TypeScript 需要知道该.tsx文件的 JSX 应编译为React.createElement而非其他框架的运行时。/** jsxImportSource react */ import { type ReactNode, useState } from react; export function Counter({ children }: { children?: ReactNode }) { const [count, setCount] useState(0); const add () setCount((i) i 1); const subtract () setCount((i) i - 1); return ( div classNamecounter button onClick{subtract}-/button pre{count}/pre button onClick{add}/button /div div classNamecounter-message{children}/div / ); }Preact 的写法几乎一致PreactCounter.tsx只是jsxImportSource preact、hooks 从preact/hooks导入SolidSolidCounter.tsx则换成jsxImportSource solid-js和createSignal响应式原语。Svelte 5runes 语法SvelteCounter.svelte 使用 Svelte 5 的 runes$props()接收插槽类型Snippet$state(0)声明响应式计数模板中{render children?.()}渲染插槽。Vue 3setup() 一个已知的类型提示噪音VueCounter.vue 使用组合式 API 的 Options 风格setup()ref(0)声明计数。该文件里还保留了一条很有价值的注释如果 Vue 模板中的class出现类型错误原因是types/react的 JSX 定义是全局声明、会泄漏到项目所有文件在 React 与 Vue 共用 TypeScript 的项目中目前没有完全规避的办法。这提示在混合项目中若遇到此类编辑器误报属于已知现象而非配置错误。五、TypeScript 配置让 Vue 模板获得智能提示examples/framework-multiple/tsconfig.json 只有一处特殊配置{ extends: astro/tsconfigs/strict, include: [.astro/types.d.ts, **/*], exclude: [dist], compilerOptions: { // Needed for TypeScript intellisense in the template inside Vue files jsx: preserve } }继承 Astro 官方的strict预设jsx: preserve则是为了让 Vue 单文件组件的template部分内含 JSX 风格的模板语法获得 TypeScript 智能提示。六、运行验证官方 e2e 测试如何覆盖多框架场景Astro 仓库自带一套 Playwright e2e 测试来验证多框架场景即 packages/astro/e2e/multiple-frameworks.test.ts它对每个框架的计数器做了一致的断言页面加载后对应#react-counter、#preact-counter、#solid-counter、#vue-counter、#svelte-counter均可见且初始计数为0点击.increment按钮后计数变为1证明各框架组件的客户端事件绑定真正生效还包含一组HMR 用例分别修改各框架组件源码如 React 的useState(0)改为useState(5)、Vue 的ref(0)改为ref(5)、Svelte 的let count 0改为let count 5断言开发服务器热更新后计数器初始值变化——说明多框架集成下各框架的热替换能力同样可用。该测试基于独立的 fixturepackages/astro/e2e/fixtures/multiple-frameworks/运行验证的是 Astro 核心与集成层的组合行为与本文示例目录互为印证。小结把这篇示例的要点浓缩成可复用的实践清单注册集成在astro.config.mjs的integrations中加入需要的astrojs/*集成包无需其他配置目录隔离JSX 类框架React/Preact/Solid建议通过{ include: [**/框架名/*] }限定处理范围.svelte/.vue组件可免配置显式 JSX 来源每个.tsx组件文件首行用jsxImportSource注释指明所属框架按需水合交互组件配合client:visible等指令只在需要时加载对应框架运行时TS 兼容使用astro/tsconfigs/strict预设并视 Vue 提示需求开启jsx: preserve。这套机制使微前端式的多技术栈共存成为可能——团队可以按组件维度选择最合适的框架而整个站点仍由 Astro 的构建、路由与渲染管线统一托管。【免费下载链接】astroThe web framework for content-driven websites. ⭐️ Star to support our work!项目地址: https://gitcode.com/GitHub_Trending/as/astro创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考