关于svelte框架——sapper和sveltekit的发展

虽然您可能现在还没有听说过svelte,但是其实svelte的发展速度超过了你的想象。

本文主要讲的是关于sapper和sveltekit这两款框架的发展。

svelte作者里奇·哈里斯(Rich Harris)在2020年10月的svelte峰会上表示:sapper永远不会发布1.0版本。

也就是说sapper不会发布正式版,一直处于非稳定版本。也可能放弃更新。

主要原因是sapper多年来代码库变得凌乱,但更主要的原因是最近网络发生了很大变化。

而作者放弃sapper后的另一种选择是开发SvelteKit

SapperSvelteKit都是svelte的开发框架,类似于vue的nuxt框架。

sveltekit包含的功能有:

  • 服务端渲染(SSR)

  • 路由

  • typescript支持

  • less, scss支持

  • serverless

  • vite打包

可以看到,sveltekit几乎包含了所有我们想要的功能,既能高效开发,又有高性能。

创建sveltekit的方法:


mkdir my-app

cd my-app

npm init svelte@next

npm install

npm run dev

需要注意,您的nodejs版本需要更新到v12以上,否则可能出现以下错误:


$ npm run dev -- --open


> sveltekit-app@0.0.1 dev D:\workspace\sveltekit-app

> svelte-kit dev "--open"

D:\workspace\sveltekit-app\node_modules\@sveltejs\kit\svelte-kit.js:2

import './dist/cli.js';

	SyntaxError: Unexpected string
	at Module._compile (internal/modules/cjs/loader.js:723:23)
	at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
	at Module.load (internal/modules/cjs/loader.js:653:32)
	at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
	at Function.Module._load (internal/modules/cjs/loader.js:585:3)
	at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
	at startup (internal/bootstrap/node.js:283:19)
	at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
									   
	npm ERR! code ELIFECYCLE
	npm ERR! errno 1
	npm ERR! sveltekit-app@0.0.1 dev: `svelte-kit dev "--open"`
	npm ERR! Exit status 1
	npm ERR!
	npm ERR! Failed at the sveltekit-app@0.0.1 dev script.
	npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
   

使用sveltekit开发一个服务端渲染(SSR)项目

最后

虽然svelte以及sveltekit现在还不成熟,不过值得期待。 参考文献: http://www.diglog.com/story/1033371.html

https://kit.svelte.dev/docs#introduction-what-is-sveltekit