Razzle 集成 Svelte 实战基于 with-svelte 示例与 razzle-plugin-svelte 构建服务端渲染的通用应用【免费下载链接】razzle✨ Create server-rendered universal JavaScript applications with no configuration项目地址: https://gitcode.com/gh_mirrors/ra/razzle本篇技术指南以 Razzle 仓库中的 with-svelte 示例 为主线完整讲解如何在零配置的 Razzle 工程中接入 Svelte 组件、配置razzle-plugin-svelte插件以及服务端渲染SSR双入口的执行原理。读完本文你将掌握用create-razzle-app --example with-svelte快速拉起项目、理解src/index.js与src/client.js双入口协作方式、看懂插件在 webpack 层为.svelte文件注入 loader 的底层实现并能在自己的 Razzle 项目中独立集成 Svelte。示例定位一个最精简的 Svelte Razzle 骨架Razzle 的核心理念是「Create server-rendered universal JavaScript applications with no configuration」——无需手工配置 webpack、Babel 与热更新即可获得一套同时产出服务端与客户端 bundle 的构建管线。with-svelte示例正是把这一理念落地到 Svelte 生态的最简骨架它的 README 明确说明这是一个 basic、bare-bones 的基础示例只负责满足两个入口点——服务端入口src/index.js与浏览器入口src/client.js见 examples/with-svelte/README.md。需要说明的是该示例在仓库中被标记为 Incomplete, needs some love即它属于「可运行的最小骨架」而非完整业务演示当前src/目录下实际文件为index.js、client.js、server.js、App.js、App.css与App.test.js尚未包含真正的.svelte组件文件。因此阅读本示例时应重点理解集成机制与构建配置而不是把它当作 Svelte 业务代码范本。快速上手创建与运行示例示例 README 提供了官方自动生成的标准启动步骤该段由yarn update-examples自动维护见 examples/with-svelte/README.mdnpx create-razzle-app --example with-svelte with-svelte cd with-svelte yarn startnpx create-razzle-app --example with-svelte with-svelte从仓库内置的with-svelte模板创建一个名为with-svelte的新项目cd with-svelte进入项目目录yarn start以开发模式启动Razzle 会同时编译服务端与客户端并启用热更新默认监听 3000 端口。除start外示例的package.json见 examples/with-svelte/package.json还提供了完整的脚本矩阵命令作用yarn start开发模式启动razzle startyarn build生产构建razzle buildyarn test运行测试razzle test --envjsdomyarn start:prod以生产模式运行已构建的服务端NODE_ENVproduction node build/server.js依赖方面示例将razzle、razzle-plugin-svelte、razzle-dev-utils、babel-preset-razzle均锁定为4.2.15运行时依赖为express、react、react-dom^17.0.1并直接依赖svelte-loader所需的配套工具链mini-css-extract-plugin、html-webpack-plugin、webpack与webpack-dev-server。双入口结构服务端与浏览器如何分工通用universal应用的关键是同一套代码能在两端运行。示例通过两个入口文件来组织构建服务端入口src/index.jssrc/index.js 是 Razzle 约定的服务端入口它负责启动 Express HTTP 服务并把请求转交给server.js中导出的 appimport express from express; let app require(./server).default; if (module.hot) { module.hot.accept(./server, function() { console.log( HMR Reloading ./server...); try { app require(./server).default; } catch (error) { console.error(error); } }); console.info(✅ Server-side HMR Enabled!); } const port process.env.PORT || 3000; export default express() .use((req, res) app.handle(req, res)) .listen(port, function(err) { if (err) { console.error(err); return; } console.log( Started on port ${port}); });这段代码展示了 Razzle 服务端热更新的经典模式监听./server模块的热替换服务端代码变更时自动重新require无需重启进程端口通过process.env.PORT配置缺省 3000。浏览器入口src/client.jssrc/client.js 是浏览器端入口负责把服务端渲染出的 HTML 挂载点接管为可交互的 React 应用import React from react; import { hydrate } from react-dom; import App from ./App; hydrate(App /, document.getElementById(root)); if (module.hot) { module.hot.accept(); }使用hydrate而非render正是为了复用服务端渲染产生的 DOM避免重复挂载带来的闪烁与性能损耗。服务端渲染流程renderToString 与资源清单src/server.js 实现了完整的 SSR 渲染管线是理解本示例核心逻辑的最佳入口import App from ./App; import React from react; import express from express; import { renderToString } from react-dom/server; const assets require(process.env.RAZZLE_ASSETS_MANIFEST);RAZZLE_ASSETS_MANIFESTRazzle 构建产物自动生成资源清单文件assets manifest的路径环境变量服务端据此获知客户端 bundle 中每个 entrypoint 对应的 CSS 与 JS 文件地址renderToString(App /)在服务端把 React 组件树渲染为 HTML 字符串cssLinksFromAssets(assets, client)与jsScriptTagsFromAssets(assets, client, defer crossorigin)从资源清单中取出client入口对应的样式link与脚本script标签拼入最终 HTMLserver.disable(x-powered-by).use(express.static(process.env.RAZZLE_PUBLIC_DIR))托管RAZZLE_PUBLIC_DIRpublic 目录下的静态资源.get(/*, ...)对所有路由返回渲染完成的 HTML 页面。整个流程可概括为请求 → 服务端renderToString生成 HTML → 注入 client 入口的 CSS/JS 资源标签 → 返回完整页面 → 浏览器端hydrate接管交互。未来若在示例中加入.svelte组件只需让 Svelte 组件通过某种方式渲染进这个App树例如借助 Svelte 官方的 React 封装或独立的 Svelte 挂载逻辑即可复用这条管线获得 SSR 能力。一行配置接入 Svelterazzle.config.js示例根目录的 razzle.config.js 是整个 Svelte 集成的「开关」use strict; module.exports { plugins: [svelte], };Razzle 约定plugins数组中的字符串svelte会自动解析为razzle-plugin-svelte并加载。正是这一行配置让 Razzle 在构建时具备了处理.svelte文件的能力。插件源码解析razzle-plugin-svelte 在 webpack 层做了什么Razzle 的插件体系通过modifyWebpackOptions与modifyWebpackConfig两个钩子修改构建配置。razzle-plugin-svelte的实现见 packages/razzle-plugin-svelte/index.js非常精炼只有两处关键修改use strict; module.exports { modifyWebpackOptions(opts) { const options opts.options.webpackOptions; // Add .svelte to exlude options.fileLoaderExclude [/\.svelte?$/, ...options.fileLoaderExclude]; return options; }, modifyWebpackConfig(opts) { const config opts.webpackConfig; // Add .svelte to extensions config.resolve.extensions [...config.resolve.extensions, .svelte]; config.module.rules.push({ test: /\.svelte$/, loader: require.resolve(svelte-loader), options: { preprocess: require(svelte-preprocess)({}) } }); return config; }, };逐个拆解其作用modifyWebpackOptions把/\.svelte?$/追加到fileLoaderExclude确保.svelte文件不会被默认的file-loader当作普通静态资源处理而是交给后续的svelte-loader编译modifyWebpackConfig将.svelte追加进resolve.extensions使import App from ./App这类无后缀导入也能解析到.svelte文件新增一条 rule匹配/\.svelte$/使用svelte-loader编译并挂载svelte-preprocess作为预处理器其空对象参数{}表示使用默认配置后续可按需扩展 TypeScript、SCSS 等预处理能力。配套的 packages/razzle-plugin-svelte/helpers.js 复用了razzle-dev-utils/makeLoaderFinder生成两个 loader 查找器供测试与其它代码定位配置中的 loaderuse strict; const makeLoaderFinder require(razzle-dev-utils/makeLoaderFinder); const svelteLoaderFinder makeLoaderFinder(svelte-loader); const fileLoaderFinder makeLoaderFinder(file-loader); module.exports { fileLoaderFinder, svelteLoaderFinder, };从插件的 package.json 可以看到其直接依赖svelte^3.24.1、svelte-loader^2.13.6、svelte-preprocess^4.0.10、css-loader^5.0.0peerDependencies 为razzle与razzle-dev-utils均为4.2.18注意与示例内锁定的4.2.15存在版本差安装时以实际解析到的版本为准。测试验证插件行为有据可依插件的 tests/index.test.js 使用razzle/config/createRazzleTestConfig生成一份 web 目标、dev 环境的测试配置然后断言插件的三项核心行为it(should add .svelte, () { expect(config.resolve.extensions).toContain(.svelte); }); it(should add svelte-loader, () { const rule config.module.rules.find(svelteLoaderFinder); expect(rule).not.toBeUndefined(); }); it(should add svelte format to exclude, () { const fileRule config.module.rules.find(fileLoaderFinder); expect(fileRule.exclude).toContainEqual(/\.svelte?$/); });这三条断言恰好与上文源码分析一一对应.svelte进入扩展名解析、svelte-loader规则被注入、file-loader的 exclude 中包含.svelte格式。这为「插件确实按预期修改了 webpack 配置」提供了自动化验证也是理解插件契约contract最直接的入口。在自有项目中集成 Svelte若要在自己的 Razzle 项目中启用 Svelte步骤与示例完全一致安装插件yarn add razzle-plugin-svelte在 razzle.config.js 中注册见 packages/razzle-plugin-svelte/README.md// razzle.config.js module.exports { plugins: [svelte], };之后即可在src/中创建.svelte组件并通过 webpack 的扩展名解析直接导入。需要注意示例当前仍以 Reactreact、react-dom17承担渲染层Svelte 的接入定位是「在 Razzle 管线中编译与解析.svelte文件」具体的组件渲染/挂载方式需结合 Svelte 与 React 的互操作方案自行设计——这正呼应了 README 中 Incomplete 的标注属于留给使用者的扩展空间。小结with-svelte示例虽然体量极小却完整演示了 Razzle 插件机制的核心价值通过plugins: [svelte]一行声明即可让零配置的构建管线理解一种全新文件类型。插件在modifyWebpackOptions与modifyWebpackConfig中完成的三件事——排除 file-loader、追加.svelte扩展名、注入带预处理的svelte-loader——配合测试文件的三条断言构成了一个可读、可测、可复用的集成范式。在此基础上服务端renderToString与浏览器端hydrate的双入口协作则为后续真正接入 Svelte 组件的 SSR 方案铺平了道路。【免费下载链接】razzle✨ Create server-rendered universal JavaScript applications with no configuration项目地址: https://gitcode.com/gh_mirrors/ra/razzle创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
