react server render的坑

首先是各种在node_modules中的外部依赖,需要用webpack-node-externals放到externals中

如果是使用了nodejs内置的工具,需要在externals中添加额外配置,比如 {http: ‘commonjs http’, fs: ‘commonjs fs’ }

然后是禁止使用各种window全局变量,使用各种挂在window下的全局方法之前需要先判断一下方法是否存在。

在webpack编译过的server环境中__dirname和__filename都取不到值,需要用definePlugin预先在webpack的配置中取值。

各种import进来的sass,less,css还有base64的图片一定要用extract-text-webpack-plugin去除。

react-router的各个组件经过代码分割之后是异步加载,在服务端这里要变成同步是个问题。在react-router文档说明如下,所以目前能用的解决方法就是为服务端另写一份路由,只是要在这个问题解决之前要暂时维护两份本应该统一的路由文件。

Code-splitting + server rendering

We’ve tried and failed a couple of times. What we learned:

  1. You need synchronous module resolution on the server so you can get those bundles in the initial render.
  2. You need to load all the bundles in the client that were involved in the server render before rendering so that the client render is the same as the server render. (The trickiest part, I think its possible but this is where I gave up.)
  3. You need asynchronous resolution for the rest of the client app’s life.

We determined that google was indexing our sites well enough for our needs without server rendering, so we dropped it in favor of code-splitting + service worker caching. Godspeed those who attempt the server-rendered, code-split apps.

redux在服务端传递初始状态的问题。

Posted in 未分类 | Leave a comment

chrome移动端调试

之前搞过chrome的移动端调试一直没成功,教程如下

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3

教程并没有问题,但最后一步inspect手机端页面时一直是白屏,原来问题出在

*.chrome-devtools-frontend.appspot.com这个网站必须能访问的情况下才能调试。

Posted in browser | Leave a comment

prettier/eslint/stylelint与编辑器的整合

一直用eslint,也在命令行用过prettier,最近突然大发现prettier可以和编辑器整合。

于是赶紧用上了心爱的vim插件vim-prettier,开启文件保存时自动整理代码,顿时世界就和谐了。

奈何团队其他小伙伴没有用vim的心,搜了一下,让他们把prettier整合到sublime里。

团队使用,至少能解决7成以上的代码风格问题。还得靠自动化工具,靠自觉和审查也不是不行,就是损耗太大。

既然js可以美化,css/less/scss等自然也就可以。顺带就找到了另一个神器stylelint,配合stylelint-scss,stylelint-order,stylelint-config-starndard等可以自动美化代码并提示css错误。

推荐所有前端都用上,只要你常用的ide都支持整合,再顺带推广下vim,各种插件只有想不到,等我想到了都已经有人做出来了。

Posted in vim | Leave a comment