在 Turborepo kitchen-sink 中集成 Remix 博客应用从零配置开发到 Vercel 部署【免费下载链接】turboBuild system optimized for JavaScript and TypeScript, written in Rust项目地址: https://gitcode.com/gh_mirrors/tu/turbo本文以 Turborepo 官方 kitchen-sink 示例中的blog应用一个 Remix 站点为对象讲解如何在基于 pnpm 的 monorepo 中创建、运行并部署一个 Remix 应用包括模板创建、本地开发、Vite 构建集成、Vercel 零配置部署以及 Edge Runtime 路由与 monorepo 任务编排的实战细节。读完本文你将掌握examples/kitchen-sink/apps/blog的完整运行方式并能复用到自己的 Turborepo 多包仓库中。一、应用定位kitchen-sink 里的 Remix 博客blog是 kitchen-sink 示例仓库 中的四个应用之一。根据该示例的说明整个 Turborepo 由以下应用与包组成api一个 Express 服务端storefront一个 Next.js 应用admin一个 Vite 单页应用blog一个 Remix 博客repo/eslint-config、repo/jest-presets、repo/logger、repo/ui、repo/typescript-config共享的配置与库blog的特殊之处在于它同时展示了三件事Remix 应用作为 monorepo 工作区成员、Remix 与 Vite 的现代构建集成以及Vercel 的零配置部署与 Edge Runtime 支持。工作区成员关系由根目录的 pnpm-workspace.yaml 声明apps/*与packages/*全部纳入同一个 pnpm workspace因此blog可以直接通过workspace:*协议依赖repo/ui、repo/eslint-config等共享包见 blog 的 package.json。二、从模板创建Remix CLI 的零配置起步原文档指出blog目录本质上是 Remix 官方模板的一个简要示例可以零配置部署到 Vercel。若你想从零生成一个同构的项目可直接使用 Remix CLI 指定模板npx create-remixlatest --template vercel/vercel/examples/remix这一命令会基于 Vercel 官方示例仓库中的 Remix 模板初始化项目。与通用脚手架不同该模板内置了 Vercel 部署所需的适配层使应用后续可以直接交给 Vercel 托管无需额外编写部署配置。当然如果你已经在一个 Turborepo 仓库里更推荐直接克隆整个 kitchen-sink 示例npx create-turbolatest -e kitchen-sink之后即可在apps/blog中看到与模板一致的目录结构。两种方式得到的应用代码骨架完全相同区别仅在于后者被组织进了多包工作区。三、本地开发安装依赖并启动开发服务器1. 安装依赖原文档建议先安装本地依赖。在独立的 Remix 项目中执行npm install在 kitchen-sink 这样的 pnpm monorepo 中则在仓库根目录执行一次安装即可同时装好所有应用与包pnpm install安装时请留意版本前提仓库根package.json见 examples/kitchen-sink/package.json声明了packageManager: pnpm11.25.0且engines要求node 24.20.0应用级package.json也有同样的 Node 版本约束这是本项目可复现运行的前提条件。2. 启动开发服务器在apps/blog目录内执行npm run dev该脚本由 package.json 映射为remix vite:dev即通过 Remix 官方 Vite 插件启动开发服务器。启动后访问http://localhost:5173即可看到博客首页。页面由 app/routes/_index.tsx 渲染它会导入repo/ui包中的CounterButton与Link组件直观展示 monorepo 中应用与共享 UI 库的联动效果——这是纯模板之外的 Turborepo 特性也是blog作为 kitchen-sink 成员的标志性差异。3. 在 Turborepo 中编排 dev 任务如果你不希望逐个目录手动启动可在仓库根目录执行pnpm dev其脚本为turbo run dev见 examples/kitchen-sink/package.json。根级 turbo.json 中定义了dev任务dev: { dependsOn: [^build], cache: false, persistent: true }两个关键配置含义如下persistent: true标记 dev 为常驻进程任务不会自行退出Turborepo 会以长驻方式管理它cache: false开发服务器每次运行都不走缓存确保改动即时生效。dependsOn: [^build]则保证先构建blog所依赖的上游包如repo/ui再启动应用避免跨包开发时出现引用的共享代码尚未构建的经典问题。四、构建管线Remix Vite Vercel Preset现代 Remixv2 及以上已全面拥抱 Vite。blog的 vite.config.ts 完整呈现了这一集成方式import { vitePlugin as remix } from remix-run/dev; import { installGlobals } from remix-run/node; import { defineConfig } from vite; import { vercelPreset } from vercel/remix/vite; installGlobals(); export default defineConfig({ plugins: [remix({ presets: [vercelPreset()] })], resolve: { tsconfigPaths: true, }, });几个要点值得展开remix({ presets: [vercelPreset()] })Remix Vite 插件的presets机制允许注入平台级适配。vercel/remix提供的vercelPreset会自动处理面向 Vercel 的产物组织如函数路由、静态资源拆分这正是零配置部署的底层来源installGlobals()在 Node 运行时注入fetch等 Web 标准全局对象是 Remix 服务端运行的惯例初始化tsconfigPaths: true启用基于 tsconfig.json 中paths如~/*: [./app/*]的路径别名解析同时该项目还会通过vercel/remix与vite/client的类型声明见该文件types字段获得平台类型支持。构建命令npm run build对应remix vite:build产物会落入build目录并在根级 turbo.json 中被登记为可缓存输出outputs包含build/**等目录从而使 Turborepo 可以对构建结果做远程/本地缓存。五、部署到 Vercel零配置 CLI 两种方式原文档给出了两条部署路径。方式一一键部署零配置Remix 模板本身就是为 Vercel 准备的把仓库推送到 Vercel 后平台会识别 Remix 应用并自动完成构建与函数编排无需手工编写vercel.json或服务端配置。其原理正是上一节所述的vercelPreset——部署时产物已经按 Vercel 的函数模型生成。方式二Vercel CLI先全局安装 CLInpm i -g vercel然后在项目根目录执行vercelCLI 会引导你完成登录、项目关联与首次发布。之后如需更新重复执行vercel或vercel --prod直接发布生产环境即可。Edge Runtime 验证blog还内置了一个演示 Edge 运行时的路由 app/routes/edge.tsximport type { MetaFunction } from vercel/remix; export const config { runtime: edge }; export const meta: MetaFunction () [ { title: RemixEdge | New Remix App }, ];通过导出一个config { runtime: edge }该路由即被标记为在 Vercel Edge Runtime 上执行配合vercel/remix的MetaFunction类型完成元信息声明。部署后访问对应路径即可验证 Edge 函数是否生效——这是从本地 dev走向平台运行时最直观的验证点。六、工程化质量保障类型检查与 Lintblog的 package.json 声明了完整的质量脚本check-typestsc --noEmit基于 tsconfig.jsonstrict: true、moduleResolution: Bundler、noEmit: true由 Vite 负责实际构建做纯类型校验linteslint app/ --max-warnings 0配置直接复用共享包repo/eslint-config的 React 规则集见 eslint.config.js 中的config导入并以零警告为门槛。这两项任务与build、test一起被根级 turbo.json 纳入任务图test依赖^buildlint与check-types依赖^build与^lint/^check-types从而保证在 Turborepo 并行调度下上游包的构建与检查总是先于下游应用执行形成一条可靠的跨包流水线。七、小结从examples/kitchen-sink/apps/blog/README.md出发可以看到一个 Remix 应用的落地路径非常清晰创建npx create-remixlatest --template vercel/vercel/examples/remix或通过npx create-turbolatest -e kitchen-sink在 Turborepo 中复用开发npm installnpm run dev访问http://localhost:5173monorepo 场景下用turbo run dev统一编排构建remix vite:build由 Vite 插件 vercelPreset完成面向平台的产物生成部署推送到 Vercel 零配置发布或npm i -g vercel后执行vercel并用runtime: edge路由验证 Edge 函数。对需要将 Remix 融入 Turborepo 多包仓库的团队而言apps/blog这份样例同时给出了平台适配Vercel、共享代码消费repo/ui、任务编排turbo run三套可复制的模式是理解monorepo Remix 云平台组合的极佳参考。【免费下载链接】turboBuild system optimized for JavaScript and TypeScript, written in Rust项目地址: https://gitcode.com/gh_mirrors/tu/turbo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
