月盾的专栏

上篇简单介绍了sapper和sveltekit的发展，目前sveltekit还只是Beta版本，有很多不确定因素存在，有可能会有大的变更，所以还不推荐在生产环境中使用，不过在个人项目和小项目中可以大胆尝试。今天我们就正式使用sveltekit开发一个web项目。第一步：创建项目mkdir my-appcd my-appnpm init svelte@nextnpm installnpm run dev这样就可以创建一个简陋的项目了，不过和我们真实需求还有些差距，既然是使用svelt

虽然您可能现在还没有听说过svelte，但是其实svelte的发展速度超过了你的想象。本文主要讲的是关于sapper和sveltekit这两款框架的发展。svelte作者里奇·哈里斯（Rich Harris）在2020年10月的svelte峰会上表示：sapper永远不会发布1.0版本。也就是说sapper不会发布正式版，一直处于非稳定版本。也可能放弃更新。主要原因是sapper多年来代码库变得凌乱，但更主要的原因是最近网络发生了很大变化。而作者放弃sapper后的另一种选择是开发SvelteKi

svelte给dom对象绑定事件和vue框架类似。定义函数：function handler(index){ alert("hello", index);}绑定事件：<button on:click={handler}>点击</button>但是带参函数的使用就略有不同了，函数handler的参数index需要传入的时候，不能直接这样使用<button on:click={handler(123)}>点击</button>,这样的写法会在页面打

npms.io上搜索到svelte的route包其实也不算少，使用比较广泛的svelte-spa-router路由包却不支持history模式。有些支持history模式的使用上也不是很方便，试用过五六个支持history的路由后最终@spaceavocado/svelte-router算是满足了要求。使用简单功能丰富支持history和hash我也是够难伺候的。在试用了多个支持history的路由过程中，都遇到了一个问题：切换路由后刷新404。这也算是单页应用的通病了。不过像vue这种是在部

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传最近使用svelte开发一个项目，说实在的，开发过程中遇到不少问题。每次遇到问题的时候都有种想放弃的冲动，这生态也太差了，查个啥啥问题都查不到，找个啥啥插件也没有。不过，到最后，遇到的问题又都解决了。这不，今天又遇到了本地代理的设置问题。在说遇到的问题之前先介绍一些项目架构。该项目是基于sapper框架开发，这是一个使用svelte开发的框架，具备以下特点：服务端渲染路由代码分割默认支持渐进式web应用（PWA）预取路

使用svelte开发项目时遇到需要将px转换成rem的需求，有试过postcss-px2rem，postcss-pxtorem，等postcss插件，都没成成功，最后找到了postcss-units插件成功实现。完整rollup配置文件如下：converts px to rem该配置是sapper项目配置import path from 'path';import resolve from '@rollup/plugin-node-resolve';import replace from '@r