京东延期发货索赔

IMG_5344

(图:618 下的自营单,过了 8 天总算送到了)

下单的时候,系统预计 20 号到,于是到 20 号早上出门的时候,我就和小盆友说:“晚上车车就到喽。”没想到晚上并没有到。这下好了,每天早上出门,小盆友都会问:“今天车车会到吗?”到了晚上下班回家,刚进门,小盆友又问:“今天车车到了吗?”嗯,今晚回家总算可以抢答了:“车车到喽。”

学习填色

IMG_5342

(图:小盆友学填色)

山泉水

IMG_5341

(图:每次从富春江大桥过来,经过这个路口,就能看到一些人用桶在接山上流下来的泉水,今天下雨,人还更多了)

停车场

IMG_5310

(图:来自德国的停车场,装起来相当稳)

大书摊

IMG_5283

(图:这个书摊厉害了)

入园通知书

WechatIMG305

(图:如今幼儿园入园都不简单,要先“面试”,“面试”通过后还要体检)

小盆友的玩具难度太大

IMG_5282

(图:这个奇趣蛋玩具难度太大,折腾了十几分钟,搞不定,不搞了,感觉少了配件)

next.js 的一些坑

971bf7f8-9ac0-11e6-975c-188defd82df1

这阵子在折腾 next.js,用来做 node 服务端渲染真心不错,然而一路捣腾下来,坑也是不少,有四个比较大的坑。

  1. isomorphic-fetch(解决)
  2. node 端代码打包(未解决)
  3. js 放到 cdn 或者 oss(解决)
  4. static 目录下的图片 hash(临时方案)

这四个坑,1 和 3 是必须解决的,2 和 4 可选。

1

fetch 本来不是什么问题,但是涉及到请求签名,就来了点麻烦,需要区分是服务端还是客户端,客户端用 cookie 存储 token,服务端用变量。

2

node 代码其实不需要打包,因为是运行在服务端,不过为了节省 docker 镜像的大小,尝试了打包,主要是想把 node_modules 也打包进去。先是用 webpack,能打包成功,但是运行失败。后面又用 rollup,同样是打包成功,运行失败。可能是因为 nextjs 本身就包含了 webpack,而用打包工具来打包自己,估计 webpack 和 rollup 都没有想过会有这样的场景出现。于是放弃。

3

这个比较坑,所以重点说一下。

nextjs 提供了 assetPrefix 参数,但是这个参数基本没什么用。需要解决两个问题,一是打包目录要把 hash 带进去,把原来的 bundles/pages/xxx.js 目录结构改成 [hash]/xxx.js,这一步可以在打包脚本里处理,通过 BUILD_ID 和 build-stats.json 拿到 hash,直接上代码:

rm -r -f build
mkdir build

# move pages
buildId=$(cat _next/BUILD_ID)
mkdir build/${buildId}
mv _next/bundles/pages/* build/${buildId}
rm -r _next/bundles

# move app.js
appHash=$(cat _next/build-stats.json)
appHash=${appHash#*hash\":\"}
appHash=${appHash%\"*}
mv _next/app.js build/app.${appHash}.js

其中,_next 是 nextjs 的 distDir,build 是需要上传到 cdn 的目录。

接下来在 server.js 里重写 router,用了 express,参考 https://github.com/zeit/next.js/issues/257

const cdnPrefix = 'https://mycdn.com'

server.use('/_next/**/app.js', (req, res) => {
  const appHash = req.originalUrl.replace('/_next/', '').replace('/app.js', '')
  const newUrl = `${cdnPrefix}/build/app.${appHash}.js`
  res.redirect(newUrl)
})

server.use('/_next/**/page/**', (req, res) => {
  const buildHash = req.originalUrl.replace('/_next/', '').replace(/\/page\/.*/, '')
  const pageName = req.originalUrl.replace(/.*page\//, '') || 'index'
  const newUrl = `${cdnPrefix}/build/${buildHash}/${pageName}.js`
  res.redirect(newUrl)
})

4

static 目录下的图片 hash,这个问题也比较次要,暂时可以通过 githooks 来处理图片修改的问题,对于图片只允许增量提交。

.git/hooks/pre-commit

#!/bin/sh
STAGED_IMAGES=$(git diff --cached --name-only --diff-filter=M | grep ".[(jpg)(jpeg)(png)(gif)]$")

if [[ $STAGED_IMAGES ]]; then
  echo $STAGED_IMAGES
  exit 1
fi

还有一些小坑,比如 process.env.NODE_ENV 的问题(如果有三种以上的环境),比如 scss 里面因不同环境插入不同 cdn 地址图片的问题,等等,就不列了。

生产项目:https://www.isspu.com

消除小盆友对牙医的心理阴影

IMG_5256

(图:在口腔医院儿科大厅玩五子棋)

上次补牙时间太长,中间磨牙比较痛苦,给小盆友心里留下深刻的阴影,后面死活都不想去看牙医了。为了消除小盆友对牙医的心理阴影,今天带去医院挂了别的牙医号,和牙医说明情况,然后牙医拿了个镜子在小盆友嘴里照了一会就好了。这招果然好使,小盆友表示好喜欢新牙医,以后不怕看牙医了。

这个店有点厉害

IMG_5255

(图:这个店有点厉害,隔壁还是武大郎炊饼店)