TypeScript+Babel+Webpack企业级应用开发的感想

所谓的企业级应用,从技术是说要支持极为广泛的用户浏览器,比如IE11,Edge,以及对ES6支持更好的Chrome/Safari等等。

旧的浏览器只能支持ES5是一个极为糟糕的痛点,不得不通过各种办法翻译代码到ES5。我的选型就是TS+Babel+Webpack,基本上也是前端的标配了。比较坑的是这里面配置文件的设定要花一些时间,消耗了我不少脑细胞和时间去搜索和尝试,感兴趣的可以留言交流具体的问题。有一个小窍门,是参考其它框架的工程实践,比如vue的https://cli.vuejs.org/zh/guide/browser-compatibility.html 这里面就列出了一些可以借鉴的要点,包括参考vue-cli的源代码,也可以借鉴(copy)那些babel插件可以用,如何配置config文件等等。

关于production环境发布部署,可以参考这篇文章https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ 主要是利用浏览器对于“module”关键字识别与否,条件加载转译到ES5的或者直接就是ES6的代码。现在还没有用在当前项目,不过以后如果遇到性能问题的话,就要考虑这个点了。

最后要注意的是如果考虑浏览器兼容性,一些新的特性可能就无法使用,比如Proxy这样的根本就没有比较好的polyfill方案,用了也许就支持不了IE11。当然,我的建议是用户也要与时俱进,把这些老旧浏览器赶紧的丢进垃圾桶吧。

json parse那些事

json解析简单么?最近有个这样的需求,就听到类似说法。其实json解析既简单又复杂,简单是因为json定义很简单,就这样几种类型。复杂是不同语言不同场景大量的实现,参考 http://json.org/ 就能发现轮子反复被造出来,是因为场景不同需求不同。

在JavaScript中,JSON.parse(str, reviver) 其实遵循深度优先的后序遍历,这样每个节点只需要操作一次就可以了,否则枝干节点创建以后,在所有叶子结点计算完毕,有可能还要再操作一次(比如添加子节点到自己的children成员里)。

https://zh.wikipedia.org/wiki/%E6%A0%91%E7%9A%84%E9%81%8D%E5%8E%86

http://notes.eatonphil.com/writing-a-simple-json-parser.html

https://news.ycombinator.com/item?id=19214387

https://github.com/v8/v8/blob/master/src/json-parser.h