如何将基于Rollup.js构建的Svelte项目迁移到SvelteKit？

前期准备 #

• 不要在原有项目上直接修改，先初始化一个全新的SvelteKit项目，执行命令：
  npm create svelte@latest sveltekit-project
• 按照指引选择和原有项目匹配的技术栈配置（比如是否启用TypeScript、ESLint、Prettier等），完成后进入项目目录安装依赖：
  cd sveltekit-project && npm install

核心代码迁移 #

• 业务组件迁移：原有普通Svelte组件可以直接复制到新项目的src/lib目录下，90%以上的组件逻辑不需要修改，只有涉及浏览器专属API、全局样式挂载的部分需要后续适配
• 入口与路由迁移：
  1. 原有根组件App.svelte的内容可以直接复制到src/routes/+page.svelte作为首页内容
  2. 如果有全局公共布局（比如导航栏、页脚），可以把对应逻辑放到src/routes/+layout.svelte中
  3. 原有自定义客户端路由逻辑替换为SvelteKit的文件系统路由，所有路由页面都放到src/routes目录下按照路径规则命名即可
• 静态资源迁移：原有public目录下的图片、字体、公共配置文件等资源，全部移动到新项目的static目录，资源的引用路径不需要修改

配置适配 #

• 原有Rollup自定义插件：SvelteKit底层基于Vite构建，Vite兼容绝大多数Rollup插件，你可以把原有Rollup配置里的插件逻辑迁移到vite.config.js的plugins配置项中即可
• 环境变量适配：不需要再自行配置dotenv相关逻辑，直接使用SvelteKit内置的环境变量模块，公开环境变量从$env/static/public引入，非公开的服务端环境变量从$env/dynamic/private引入
• 浏览器API适配：如果需要开启SSR/SSG能力，所有用到window、document等浏览器专属API的逻辑，要么放到onMount生命周期中执行，要么引入import { browser } from '$app/environment'做客户端环境判断后再执行，避免服务端渲染报错

验证与发布 #

• 本地启动开发服务测试所有功能：执行npm run dev，逐个验证页面跳转、接口请求、交互逻辑是否正常
• 选择适配的部署适配器：如果要部署为纯静态站点，安装@sveltejs/adapter-static并配置；如果部署到Node.js服务，使用@sveltejs/adapter-node；其他平台部署选择对应官方适配器即可
• 构建验证：执行npm run build验证构建产物是否正常，完成后即可按照SvelteKit的部署规则上线

小提示：如果原有项目是纯客户端SPA，迁移初期可以先配置SvelteKit的SPA模式，不需要适配SSR逻辑，大幅降低迁移成本，后续再逐步扩展SvelteKit的服务端能力。

内容的提问来源于stack exchange，提问作者Anna