manning rxjs in action

RxJS + React + Redux (what we call the 3R) architecture
3R这个概念还行,在这本书里头一次见。

Learning to use a new tool is as important as learning when not to use it.
与学习如何使用一项工具一样重要的是,知道什么时候该用它。

看到consumer pull和iterator push模式
对generator又加深了一些理解其应该存在的使用场景

rx生成的订阅模型,比事件模型的更容易清理,unsubscribe,对内存释放友好

hot与cold的observable对象的区别,push与pull。

There is no onesize-fits-all solution to every problem
一句话说,没有银弹。

看完之后,对rxjs总算有了个靠谱的了解。可惜看到一半左右再上的官网看,发现已经升级版本6了,书里讲的都是5。
好在5和6除了函数式风格api的变化,其他相差不多。

发表在 books | 留下评论

jest的一次失败的mock

今天添加了一个新测试用例,在需要mock的文件模块旁边添加了__mocks__然后里面添加了同名文件,之后在test文件里指定
jest.mock(‘moduleA’)

但无论如何都会加载实际模块而不是__mocks__文件夹里的内容。经过了一大轮的拼写检查、jest.doMock、为jest.mock添加第二个参数临时实现,还试了一下automock,全都不行。

最后发现该模块为了调整测试环境,在jestSetup文件里被使用了……
难怪无法mock,自己的坑啊。

发表在 ecmascript, jest | 留下评论

webpack/uglifyjs的remove dead_code功能

昨天在项目里加上了mobx-react-devtools开发环境调试用。但是生产环境不希望有,于是加上了


import MobxDevTools from 'mobx-react-devtools'
...
render () {
return ...
{process.env.NODE_ENV !== 'production' && <MobxDevTools />

}
}

打包后发现代码体积明显增大,即使加了webpack生产环境打包的UglifyJsPlugin({

uglifyOptions: { compress: { dead_code: true } }

})

也去不掉。应该是因为import是静态引入的特点造成的。

最后自己想了个法子解决了一下,写一个空组件

export default null

在webpack的alias里判断生产环境,则添加alias[‘mobx-react-devtools’] = ‘./app/component/Null.jsx’

在生产环境中吧这个空组件替换进去,如果还有其他希望生产环境中排除的都可以如此解决。

发表在 ecmascript | 留下评论