前端构建工具前端构建后端【免费下载链接】razzle✨ Create server-rendered universal JavaScript applications with no configuration项目地址https://gitcode.com/gh_mirrors/ra/razzle点击查看免费下载本文基于 Razzle 官方仓库中的with-typescript示例examples/with-typescript系统讲解在 Razzle 通用universal应用中集成 TypeScript 的完整方案包括零配置的创建与启动、tsconfig.json与 npm 脚本的工程配置、服务端渲染SSR与客户端水合hydration的类型化写法以及 Razzle 底层通过 Babel 转译.ts/.tsx的实现原理。读完本文你将能够独立搭建一个Babel 转译 tsc 类型检查双轨并行的 TypeScript SSR 应用。示例概述Razzle 如何处理 TypeScript示例 READMEexamples/with-typescript/README.md明确了 Razzle 对 TypeScript 的核心设计思路转译交给 BabelRazzle 使用babel-loader即 babel-preset-razzle把 TypeScript 代码转换为纯 JavaScript开发者无需在构建链中额外接入ts-loader或awesome-typescript-loader类型检查交给 tscTypeScript 编译器只负责静态类型检查tsc不做代码输出开箱即用的解析支持Razzle 原生认识并解析.ts与.tsx文件无需额外配置 resolve 规则。这种编译与类型检查分离的模式兼顾了两点一方面借用 Babel 生态获得快速的模块级转译与热更新能力另一方面保留tsc完整的类型系统做编译期保障。快速开始创建并运行示例与仓库内其他示例一致with-typescript可通过create-razzle-app一键创建npx create-razzle-app --example with-typescript with-typescript cd with-typescript yarn start执行后即进入开发模式Razzle 会同时启动客户端与服务端的开发服务器默认端口 3000并在代码变更时进行热更新。示例目录结构如下with-typescript/ ├── public/ # 静态资源目录 └── src/ ├── App.tsx # 应用根组件路由配置 ├── App.test.tsx # 组件测试 ├── Home.tsx # 首页组件 ├── client.tsx # 浏览器端入口hydrate ├── declarations.d.ts # 资源模块的类型声明如 .svg ├── index.ts # 开发服务器入口含服务端 HMR ├── server.tsx # 服务端渲染入口Express ├── setupTests.ts # Jest 测试环境初始化 ├── App.css ├── Home.css └── react.svg工程配置逐项解析tsconfig.json仅做类型检查的编译器配置示例的 tsconfig.json 是一个为类型检查专用设计的配置关键项如下{ compilerOptions: { target: esnext, module: commonjs, lib: [dom, dom.iterable, esnext], allowJs: true, skipLibCheck: true, esModuleInterop: true, allowSyntheticDefaultImports: true, strict: false, forceConsistentCasingInFileNames: true, moduleResolution: node, resolveJsonModule: true, isolatedModules: true, noEmit: true, jsx: react }, include: [src] }各选项在 Razzle 场景下的含义配置项作用与说明noEmit: true最核心的一项。tsc只做类型检查、不输出任何 JS 文件实际代码产物由 Babel 生成避免两套构建输出互相干扰jsx: react采用 React 经典 JSX 转换方式配合 Babel 的 JSX 处理二者产物语义一致isolatedModules: true模拟 Babel 单文件转译的隔离性每个文件被独立转译禁止依赖跨文件的类型信息推断保证tsc检查结果与 Babel 实际转译行为对齐module: commonjsmoduleResolution: node与服务端 Node 运行环境匹配同时客户端代码由 Webpack 处理模块解析esModuleInterop/allowSyntheticDefaultImports允许以默认导入方式引入 CommonJS 模块如import express from expressresolveJsonModule: true支持直接require/importJSON服务端加载 assets manifest 时用到allowJs: trueinclude: [src]允许混用 JS 与 TS 文件便于渐进式迁移strict: false示例为了降低上手门槛未开启严格模式实际项目中可根据需要改为true。package.json双轨脚本与依赖examples/with-typescript/package.json 中的脚本体现了tsc 检查 razzle 构建的协作方式{ scripts: { start:tsc: tsc -b -w --preserveWatchOutput, start: concurrently \yarn start:tsc\ \razzle start\, build: tsc -b razzle build, test: razzle test --envjsdom, start:prod: NODE_ENVproduction node build/server.js } }start借助concurrently并行运行tsc -b -w类型检查的 watch 模式--preserveWatchOutput保持输出整洁与razzle start启动开发服务器。这样每次保存文件Razzle 立即转译并刷新页面同时 tsc 在后台持续报告类型错误build先执行tsc -b完成一次完整类型检查通过后再执行razzle build产出生产构建相当于把类型检查作为生产构建的前置门禁test复用 Razzle 内置的 Jest 配置razzle test并通过--envjsdom指定 DOM 测试环境start:prod以生产模式直接运行razzle build生成的build/server.js。依赖方面运行时依赖仅有express、react、react-dom与react-router-dom开发依赖中除razzle、razzle-dev-utils、babel-preset-razzle外还包括typescript以及对应的types/*类型包types/react、types/react-dom、types/express、types/node、types/react-router-dom等以及 Webpack 4 相关插件html-webpack-plugin、mini-css-extract-plugin。关键源码走读SSR 与客户端的类型化写法服务端入口 server.tsxsrc/server.tsx 演示了如何在 Express React SSR 场景下使用 TypeScriptimport express from express; import { renderToString } from react-dom/server; import { StaticRouter } from react-router-dom; import { StaticRouterContext } from react-router; import App from ./App; let assets: any; const syncLoadAssets () { assets require(process.env.RAZZLE_ASSETS_MANIFEST!); }; syncLoadAssets();要点process.env.RAZZLE_ASSETS_MANIFEST!是 Razzle 注入的构建产物清单路径非空断言!告知 tsc 该环境变量必然存在assets声明为any以容纳清单结构renderApp(req: express.Request, res: express.Response)使用StaticRouter依据请求路径渲染App /并通过StaticRouterContext捕获重定向信息若context.url存在则返回redirect否则返回完整 HTML 字符串HTML 模板中通过cssLinksFromAssets(assets, client)与jsScriptTagsFromAssets(assets, client, defer crossorigin)从 assets manifest 中动态拼接 CSSlink与 JSscript标签服务端使用express.static(process.env.RAZZLE_PUBLIC_DIR!)托管静态资源并将所有路径/*交给renderApp处理。客户端入口 client.tsxsrc/client.tsx 与服务端对称使用BrowserRouter与hydrate完成水合import { hydrate } from react-dom; import { BrowserRouter } from react-router-dom; import App from ./App; hydrate( BrowserRouter App / /BrowserRouter, document.getElementById(root) ); if (module.hot) { module.hot.accept(); }module.hot由 Razzle 注入的 Webpack 环境类型types/webpack-env提供类型定义module.hot.accept()使客户端在开发模式下接受模块热替换。开发服务器入口 index.tssrc/index.ts 展示了 Razzle 的服务端 HMR模式开发环境下require(./server).default获取 SSR 服务器监听module.hot事件后重新加载./server实现服务端代码改动后无需重启即可生效端口通过process.env.PORT读取默认 3000const port process.env.PORT ? parseInt(process.env.PORT, 10) : 3000; export default express() .use((req, res) app.handle(req, res)) .listen(port, () { console.log( App started http://localhost:${port}) });路由组件 App.tsx 与 Home.tsxsrc/App.tsx 使用react-router-dom的Switch/Route组织路由将/指向Homesrc/Home.tsx 则演示了类组件的类型化写法React.Component{}, {}泛型声明 props 与 state。这也说明该示例的路由代码天然可被 SSR 的StaticRouter与客户端的BrowserRouter复用。类型声明与测试基建src/declarations.d.ts 声明了*.svg等资源模块的类型使import logo from ./react.svg能通过类型检查并得到字符串类型declare module *.svg { const src: string; export default src; }src/setupTests.ts 引入testing-library/jest-dom/extend-expect为 Jest 提供toBeInTheDocument等 DOM 断言匹配器src/App.test.tsx 演示了组件测试写法用MemoryRouter包裹App /断言页面渲染出 Welcome to Razzle 文本。底层原理Razzle 为何能开箱即用解析 .ts/.tsxRazzle 原生支持.ts/.tsx并非魔法可以从 packages/razzle 的构建配置源码中得到印证在 packages/razzle/config/createConfigAsync.js 中Webpack 的resolve.extensions被配置为包含.ts与.tsxextensions: [.mjs, .js, .jsx, .json, .ts, .tsx],这使得 import 语句无需写扩展名也能正确解析 TypeScript 文件Babel 侧的转译由 packages/razzle/config/babel-loader/razzle-babel-loader.js 驱动其底层依赖 babel-preset-razzle 内置的 TypeScript 预设babel/preset-typescript一族插件从而把.ts/.tsx中的类型注解与接口在转译阶段剥离输出纯 JavaScript由于 Babel 是单文件、无类型信息的转译器示例的tsconfig.json特意开启isolatedModules: true保证tsc的类型检查模型与 Babel 的实际转译行为保持一致避免出现检查通过但转译失败的偏差。需要说明的是Razzle 也提供独立的 razzle-plugin-typescript 插件适用于需要更深层 TypeScript 集成如自定义 loader 链的场景而with-typescript示例展示的Babel 转译 tsc 检查则是无需任何额外配置的默认路径。小结通过with-typescript示例可以总结出在 Razzle 中使用 TypeScript 的标准姿势不用配置 loader.ts/.tsx的解析与转译由 Razzle 内置的 Webpack/Babel 配置完成tsc 专职类型检查tsconfig.json设置noEmit: true与isolatedModules: true确保检查与转译模型一致双轨脚本协作开发期用concurrently并行跑tsc -b -w与razzle start构建期先tsc -b后razzle build把类型错误拦截在生产构建之前补齐声明文件为*.svg等静态资源编写d.ts声明并为react、express等依赖安装types/*包。这种编译与检查分离的思路让开发者既能享受 Babel/Webpack 生态的构建效率与热更新体验又能获得完整的 TypeScript 类型安全保障。赞分享前端构建工具前端构建后端【免费下载链接】razzle✨ Create server-rendered universal JavaScript applications with no configuration项目地址https://gitcode.com/gh_mirrors/ra/razzle点击查看免费下载相关推荐在 Razzle 中集成 React Server Components基于 with-react-server-components 示例的完整实战指南在 Razzle 中集成 React Server Components基于 with react server components 示例的完整实战指南 R前端构建工具前端构建后端Next.js TypeScript GraphQL Code Generator 全链路类型安全实战基于 with-typescript-graphql 示例完整拆解Next.js TypeScript GraphQL Code Generator 全链路类型安全实战基于 with typescript graph前端后端Web框架SSR前端构建在 Razzle 中集成 Vue基于 with-vue 示例的通用渲染应用实战指南在 Razzle 中集成 Vue基于 with vue 示例的通用渲染应用实战指南 本指南以仓库 examples/with vue https://link前端构建工具前端构建后端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考