【svelte】svelte-kit踩坑指南

前言

• 从旧版sapper变成了新的框架svelte-kit，赶紧体验下。
• 目前svelte-kit还未变成正式版，所以不太稳定，如果追求稳定请使用sapper。
• 本篇会说一些目前的坑以及一些svelte的设计概念。

创建项目

• svelte-kit 内置2个模板，包括一些选项。创建很简单：

npm init svelte@next my-app
cd my-app
npm install
npm run dev

• 运行dev后，看见3个路由切换则ok，todo那个demo有一定可能不能工作， 具体我也不清楚咋回事，后续开发时发现不能工作其实不影响开发，不知道是他们api问题还是什么情况。

layout

• layout的设置有点类似于umi，使用__layout.svelte命名。则该页面下所有文件都会从layout文件中过一遍。
• 如果下级不需要使用layout的样式，使用__layout.reset.svelte文件名即可重置根样式。

Adapter

• https://kit.svelte.dev/docs#adapters
• svelte会对生成的东西使用adapter进行转换，有几种转换器，这影响最终的结果。
• 比如如果你要生成静态页面，那你就需要@sveltejs/adapter-static这个转换器，而如果你需要node 的话，你需要node 转换器，另外还有些云服务商的转换器用于制作各种产物。
• node 转换器中会有坑，在svelte的module中产生的获取初始函数的load里会解构出fetch函数，而这个fetch在node 转换器中可能不存在，所以需要根目录的hooks下加入以下函数：

/** @type {import('@sveltejs/kit').ServerFetch} */
export async function serverFetch(request) {
	/*
	if (request.url.startsWith('https://api.yourapp.com/')) {
	  // clone the original request, but change the URL
	  request = new Request(
		request.url.replace('https://api.yourapp.com/', 'http://localhost:9999/'),
		request
	  );
	}
	*/

	return fetch(request);
}

• 在部署githubpage静态页面中也会有坑，因为github的页面是使用jekyll部署的，所以对于部署出的应用，是默认不会加载带下划线开头的文件，但svelte生成的静态文件里会有下划线的文件夹，所以需要在部署的分支下放入文件名为.nojekyll的文件来告诉jekyll不忽略带下划线开头的文件夹。
• 另外，在base上设置也需要进行注意，传给静态adapter的base后，需要注意在代码中也要改好base。sveltekit提供$app/paths来获取base:

import { base } from '$app/paths';

UI组件库

• 这里也有坑，我使用了2款组件库进行试验，第一款是smelte，在进行安装时，发现该组件库的类型声明有点问题。而且版本略微有点老，虽然git仓库较新。
• 另外试了material-svelte，使用起来感觉不错，暂未发现问题。

Vite的坑

• 由于svelte使用了vite，导致在ssr时产生了无法导入esm的坑。解决方式是在vite配置项中加入external，不过如果那个包引的别的包有问题，那么还是会导致报错。目前暂时无法解决这个问题，等什么时候vite解决这个bug再说。

参考代码

• 对于svelte部署ghpage以及markdown渲染加上载入组件库，我已经搭好一套，有需要自取：https://github.com/yehuozhili/svelte-kit-markdown