基于sapper开发svelte项目配置本地代理
sapper可能被放弃更新,如果您要继续使用svelte,可以考虑使用sveltekit
最近使用svelte开发一个项目,说实在的,开发过程中遇到不少问题。
每次遇到问题的时候都有种想放弃的冲动,这生态也太差了,查个啥啥问题都查不到,找个啥啥插件也没有。
不过,到最后,遇到的问题又都解决了。
这不,今天又遇到了本地代理的设置问题。
在说遇到的问题之前先介绍一些项目架构。该项目是基于sapper
框架开发,这是一个使用svelte开发的框架,具备以下特点:
- 服务端渲染
- 路由
- 代码分割
- 默认支持渐进式web应用(PWA)
- 预取路由
- 单独的头标签(meta,link等)
- 作为静态站点弹出
- Cypress测试(免费,简单,端到端的测试)
可以看到,sapper
基本是集合了目前前端开发所有需求,双向数据绑定,渐进式开发,SSR,静态化,高性能。
遇到的新问题:对于前端项目,调用接口时容易遇到跨域问题,一般是使用本地代理解决。自然也想这样来做,可是sapper没有vue项目那样的生态,用的打包工具也不是webpack,而是rollup。
那么就使用sapper自带的服务端来做代理好了。sapper的服务端用的是polka
,而不是express,不过没关系,其实可以相互替换。
最关键的是增加了http-proxy-middleware
中间件,却对中间件位置很敏感,不是想随便在哪添加一下就行。需要添加在第一个中间件位置,否则就会优先使用静态服务中间件,导致接口找不到。
完整代码:
import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';
import { createProxyMiddleware } from 'http-proxy-middleware';
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
polka()
// 需要放在最前面,否则接口404,secure参数解决调用https问题
.use('/api', createProxyMiddleware({ target: 'https://example.com', pathRewrite: { '^/api': '' }, secure: false, changeOrigin: true, }))
.use(
compression({ threshold: 0 }),
sirv('static', { dev }),
sapper.middleware()
)
.listen(PORT, err => {
if (err) console.log('error', err);
});
总结: 总体来说,使用svelte开发的确没有vue顺畅,但遇到的问题都有解决方案,对于一些非核心项目还是可以使用的,粗略的对比老项目,在性能上有50%的提升。如果你不想使用回最原始的开发方式来提升性能,那么svelte是个不错的备选方案。