npms.io上搜索到svelte的route包其实也不算少，使用比较广泛的svelte-spa-router路由包却不支持history模式。有些支持history模式的使用上也不是很方便，试用过五六个支持history的路由后最终@spaceavocado/svelte-router算是满足了要求。
使用简单 功能丰富 支持history和hash 我也是够难伺候的。 在试用了多个支持history的路由过程中，都遇到了一个问题：切换路由后刷新404。这也算是单页应用的通病了。不过像vue这种是在部署到服务器上刷新404，而svelte却在开发过程中也出现了，又想放弃了… 好在我也是试用过五六七八个路由的人了，中间不知道尝试过多少种方法来实现history路由。最后使用@spaceavocado/svelte-router包实现了history路由的时候我还是满心欢喜。
使用方法：
//App.svelte <script> import RouterView from '@spaceavocado/svelte-router/component/view'; import { routes } from './router.js' </script> <RouterView /> //router.js import createRouter from '@spaceavocado/svelte-router'; import index from './index/index.svelte'; import a from './a/a.svelte'; import b from './b/b.svelte'; export const routes = createRouter({ mode: "HISTORY", routes: [ { path: '/', name: 'HOME', component: index, }, { path: '/a', name: 'a', component: a, }, { path: '/b', name: 'b', component: b, }, { path: '*', component: index, }, ], }); // index.
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, })) .
使用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 '@rollup/plugin-replace'; import commonjs from '@rollup/plugin-commonjs'; import url from '@rollup/plugin-url'; import svelte from 'rollup-plugin-svelte'; import babel from '@rollup/plugin-babel'; import { terser } from 'rollup-plugin-terser'; import config from 'sapper/config/rollup.js'; import pkg from './package.json'; import sveltePreprocess from 'svelte-preprocess'; // import { less } from 'svelte-preprocess'; const postcssUnits = require('postcss-units'); const mode = process.env.NODE_ENV; const dev = mode === 'development'; const legacy = !
svelte给dom对象绑定事件和vue框架类似。 定义函数：
function handler(index){ alert("hello", index); } 绑定事件：
<button on:click={handler}>点击</button>
但是带参函数的使用就略有不同了，函数handler的参数index需要传入的时候，不能直接这样使用<button on:click={handler(123)}>点击</button>,这样的写法会在页面打开时直接执行，而不是在点击按钮的时候执行。
这是初学svelte的时候比较郁闷的事，官方文档中也没有明显的文档说明如何传参。 正确的传参方式是这样的： <button on:click={() => handler(123)}>点击</button> 将on:click的内容改写为匿名函数，在函数中调用。
go单元测试会遇到这样的场景： 写好了service层函数getUser()。然后测试测试getUser函数。有个问题是，函数中使用了数据库连接，如果直接测试的话会报错误，比如空指针错误。
panic: runtime error: invalid memory address or nil pointer dereference [recovered] panic: runtime error: invalid memory address or nil pointer dereference [signal 0xc0000005 code=0x0 addr=0xb0 pc=0x167680d]
如果遇到这种情况很有可能就是数据库连接未初始化。但是单元测试并不会主动去初始化数据库连接。不用担心，有办法。 go test提供了用于初始化的方法：TestMain函数。只需要在这个函数中进行数据库初始化，后面需要用的的数据库连接可直接使用，不需要重复初始化。
func TestMain(m *testing.M) { fmt.Println("begin") dba, err := gorm.Open("sqlite3", "../../website.db") db.SQLLite = dba if err != nil { panic(err) } m.Run() fmt.Println("end") } func TestProjectUsers(t *testing.T) { userService := user.NewService(db.SQLLite) users, err := userService.GetProjectUsers(25) if err != nil { t.
svelte目前没有提供官网路由组件，不过可以在社区中找到。本文介绍的是svelte-spa-router的使用方法。
npm i svelte-spa-router 参考以下目录结构创建文件（不是必须）
router.js:
import index from './index/index.svelte'; import a from './a/a.svelte'; import b from './b/b.svelte'; export const routes = { '/': index, '/a': a, '/b': b } 动态导入组件和代码分割：
import { wrap } from 'svelte-spa-router/wrap' import index from './index/index.svelte'; export const routes = { '/': index, '/a': wrap({ asyncComponent: () => import('./a/a.svelte') }), // '/b': b // 动态加载 '/b': wrap({ asyncComponent: () => import('./b/b.svelte') }), } 动态导入组件的优点是组件不会一起打包，而是单独的组件文件，在打开对应的页面时才会请求，可以有效减少包文件大小。 App.svelte:
vscode远程开发 vscode远程开发功能在2019年5月份发布，到现在已经有一年半的时间了，但是周围的人很少提及此功能，并不是没有人使用vscode，而是对此没有强烈需求。
那么远程开发还有什么用呢？下面我来举些列子。
关于vscode远程环境搭建本文不重复说明，网上有大量教程，大家只需要安装remote development插件基本都可以使用起来。
远程开发，顾名思义就是连接远端服务器进行开发，这样的场景确实不是很常见，但是有时候却是很有用，能够解决燃眉之急。
本地主机性能差 有一些大型项目对电脑的要求也较高，编译耗时，跑起来吃内存，我们的常规解决方案是升级电脑内存，升级硬盘，总之就是换高配电脑，如果是换一台也倒罢了，如果是一个团队都要使用更高配的电脑，那这样的成本还是挺高的。
此时利用远程开发功能，所有人共用一台8核16G服务器就足够了。能够解决编译耗时，吃内存等问题。
开发环境统一 现代大多数应用服务是跑在Linux上的，而开发环境则有Windows，Mac，有些服务在开发环境下无法顺利跑起来，这种情况就可以利用远程开发，不再需要虚拟机或WSL了，在Linux上部署应用，在Windows上开发。
远程调试 远程调试我想很多人都有过这样的需求，但是却从来没有过真正的实践，原因是太难搞了。线上出问题，本地无法复现，真希望能够直接调试线上代码，但是无奈无法实现。现在好了，有了vscode远程开发，调试就变得容易了。
远程编辑文件 在Linux上编辑文件时使用的vim编辑器对大多数人来说有些头大，能在vscode中编辑文本就舒服多了。只需要使用vscode连接远程服务可以很方便打开文件并编辑。
在家临时远程开发 作为开发的我们，每天下班都要背着电脑回家，主要原因就是防止线上有问题，能够打开电脑调试代码。一般来说并不是家里没有电脑，而是没有能够正常运行的开发环境。
而远程开发正好能解决该问题，我们需要的仅仅是一台装有vscode的普通电脑即可，不需要再操心开发环境，各种SDK，C++，Python，Nodejs等等八辈子不用的软件装了一大堆，还需要经常更新才行。
节省成本 大多数开发人员是不需要经常开发大型项目和远程调试代码的，但是不是完全没有，这样就需要为了不时之需而配置笔记本电脑，而笔记本电脑一般相对台式机是又贵性能还低，公司要为了应对偶发情况而给开发人员配备笔记本电脑，会造成资源浪费，成本升高。
如果有了远程开发环境，则能应对临时性工作，大大降低成本。
用iPad写代码 如果你觉得vscode远程开发还不够酷？那在iPad中写代码呢？
vscode远程开发虽好，但还有有局限性，毕竟还是需要一台可以安装vscode的电脑，还是不能随时随地的写代码。现在我要告诉你如何在iPad中写代码！
code-server是一个可以运行在服务器上的web项目，这下我们可以在浏览器中使用vscode了，可以在浏览器中打开vscode的，自然就可以使用iPad来写代码了。 Eclipse Theia https://gitpod.io/#https://github.com/eclipse-theia/theia
额，希望苹果能给我广告费！
再或者使用使用codespaces也可以在线编辑代码，https://mp.weixin.qq.com/s/Eutjgbx_nofmuhU2yBGhxg
最后 贴一篇带图的环境搭建教程真香！使用 VSCode 远程开发调试
MySQL常用的客户端是Navicat，SQLyog等，本文推荐另一款通用的客户端：DBeaver
DBeaver不能创建表？那是因为选错了视图。可以重新编辑链接
puppeteer要模拟3G，4G网络需要利用DevTools Protocol。 Chrome DevTools Protocol
page = await browser.newPage(); // 模拟3g网络 let cdp = await page.target().createCDPSession(); await cdp.send('Network.emulateNetworkConditions', { 'offline': false, 'downloadThroughput': 600 * 1024,//(bytes/sec) 3G最高600K/s 4G 最高10M/s 'uploadThroughput': 600 * 1024,//(bytes/sec) 'latency': 0 }); await page.setCacheEnabled(false); await page.goto(url);
postman是开发人员必备的接口测试工具，虽然经常使用，但是并不会使用到所有功能，除了简单的接口测试外，它还有很多实用的功能，如果充分利用起来，能使我们的工作事半功倍。
环境变量的使用 捕获请求和cookie 收藏接口与分享接口 批量测试 编写文档和示例 环境变量的使用 环境变量的作用是使用切换变量的方式代替频繁的环境修改。这样我们只需保存一次测试接口就可以在不同环境下使用。 举例：
环境变量配置
环境变量使用
环境变量切换
捕获请求和cookie 能够直接将浏览器中的请求和cookie同步到postman，省去手动复制请求接口和cookie到postman中。 同时，对于需要登录后使用的接口，postman可以直接使用浏览器的登录状态，而不必复制cookie。 举例： 收藏接口与分享接口 将自己保存的接口分享与他人，直接拿来即可使用。 如果安装了Chrome插件，则可以直接的浏览器中打开链接。使用客户端需要使用import来导入。 批量测试 保存的多个接口批量测试。 编写文档和示例 对于团队协作很有用，接口交流利器。不仅有了请求参数，添加一个example还可以看到接口返回参数。
