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），仅供参考
企业数字化 ERP 产品动态
相关推荐
AUTOSAR配置效率革命：AI辅助工具实战与选型指南 1. 从手动配置到AI辅助：AUTOSAR开发效率的拐点已经到来如果你在汽车电子行业待过几年，一定经历过这样的场景：一个ECU项目刚立项，系统工程师把ARXML文件丢过来，接下来就是漫长的配置周期。打开工具链，面对EC… · 2026/9/24 19:41:44
个人信息保护合规审计现场实战：访谈、抽样与穿行测试指南 1. 进点准备期：先把「信息资产地图」画出来，再谈审计方案1.1 审前访谈别急着要材料，先弄清楚业务和主体边界接到个人信息保护合规审计任务后，大多数人的第一反应是列一份长长的资料需求清单，催着企业尽快提交。这其实是… · 2026/9/24 19:41:44
捏起褶皱，封存食材原本的鲜香 作为山东面食文化里颇具代表性的品类，大肚水饺的魅力，藏在那一圈圈贴合面皮的褶皱里——这些褶皱不只是制作的痕迹，更是锁住食材本味的“密钥”。 山东鲁香源食品股份有限公司出品的大肚水饺，依托当地丰富的农产与畜产资源&#x… · 2026/9/24 19:41:44
番茄工作法在软件测试中的实战应用与落地指南 我想先聊一个场景：你坐在工位上，刚把一条用例的前置数据准备好，正准备开始执行，微信弹了需求变更，紧接着测试环境挂了，等环境的时候顺手刷了十分钟网页，等环境好了，刚才那条用例的逻… · 2026/9/24 20:24:23
外贸必备：集装箱类型、尺寸对照与装柜计算全攻略 做外贸这些年，我最大的体会是：很多新手一开始把精力全扑在找客户、谈价格上，结果货快出了，却在"装什么柜子、能装多少、怎么装"上栽了跟头。集装箱的类型与尺寸，看似是物流环节里最不起眼的基础知识… · 2026/9/24 20:24:23
重组人IL-6蛋白实验应用全攻略：从信号通路到临床转化 在生物医学实验室泡久了的人，对IL-6这个名字绝对不会陌生。白介素-6（Interleukin-6）可以说是整个炎症网络里最核心的枢纽分子之一，几乎所有跟免疫、炎症、肿瘤、自身免疫病相关的课题，绕来绕去都会碰到它。但真正动手去… · 2026/9/24 20:24:17
IL-6重组蛋白研究从信号通路到临床应用的完整指南 我们实验室和IL-6打交道快十年了，从最初拿重组蛋白做细胞增殖实验，到后来用各种突变体和中和抗体去拆解信号通路，再到近几年参与几个抗体药物的临床前评估，这一路踩过的坑、积累的经验，确实值得好好写一写。很多人问我… · 2026/9/24 20:24:17
Flask+微信小程序构建寻亲平台：全栈实战与部署指南 “宝贝回家”这几个字，对做技术的人来说，不应该只是新闻里的感人故事。它背后是一个极其典型的 Web 全栈实战场景：地理位置、图片存储、模糊搜索、状态流转、消息通知，全部都在一个小程序里。用 Flask 做后端，配合微信… · 2026/9/24 20:24:17
蓝牙SoC产线反复升级问题排查：以中科蓝讯BT5756C为例 做蓝牙音频方案这些年，中科蓝讯的芯片没少折腾，BT5756C算是我手里出镜率比较高的一颗。前两天刚好有个做耳机的客户找过来，说产线测试盒升级固件的时候遇到了个怪现象：固件烧进去了，板子也重启了，可没跑两秒… · 2026/9/24 20:24:17
基于YOLOv8的渔船作业监控系统：从环境搭建到边缘部署全流程 简介：这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源，围绕YOLOv8实现渔船作业监控系统，可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件，约24.21MB，以70个Python源码文件为… · 2026/9/24 0:00:13
1D-CNN时间序列建模实战：从Conv1d原理到工业落地 简介：面向时间序列数据建模的一维卷积神经网络完整实现，适合深度学习入门者及需要快速验证时序模型的研究者，能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小，只有3KB，内含3个Python脚… · 2026/9/24 0:00:26
柔软的L：汉语语流中被忽视的舌肌张力控制 1. 这个“L”不是字母表里的L，而是舌尖上的L最近在几个方言群和语音教学社群里，反复看到有人发一句：“也说字母L：柔软的长舌”。初看以为是英语发音课笔记，点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44
