技術標籤：前端vue

最近使用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是個不錯的備選方案。