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。当然,我的建议是用户也要与时俱进,把这些老旧浏览器赶紧的丢进垃圾桶吧。

程序设计原则

YAGNI – You Aren’t Gonna Need It
https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it
https://martinfowler.com/bliki/Yagni.html
“Always implement things when you actually need them, never when you just foresee that you need them.”
“你不需要做这事”原则,但是也需要权衡短期就需要的灵活扩展可能性。
建议:对于需求之外的扩展,可以经过小组讨论决定是否需要。

Don’t repeat yourself
https://en.wikipedia.org/wiki/Don%27t_repeat_yourself
“别重复自己”原则。
通过自动化测试替代反复使用的手动测试。
通过设计模式,抽象,继承,重载,公用函数来减少代码重复。
提醒信号:再一再二,但不能再三再四。如果一件事,一段代码,一个需求,一个手动测试反复出现,就可以考虑应用DRY原则。

KISS – Keep it simple, stupid
https://en.wikipedia.org/wiki/KISS_principle
“保持简单”原则。
对于一个需求,如果有两种实现,一种较为简单,一种比较复杂,尽量选择简单的实现。
参考“奥卡姆剃刀” (https://zh.wikipedia.org/wiki/%E5%A5%A5%E5%8D%A1%E5%A7%86%E5%89%83%E5%88%80 )

If it ain’t broke, don’t fix it
https://en.wikipedia.org/wiki/Bert_Lance#If_it_ain’t_broke,_don’t_fix_it
“没坏就不修”原则。
一个设计或者代码,虽然不够好,如果满足需求还能用就不要动它。
反例:如果新的开发要修改以前代码,可以考虑一起把不够好的部分修掉。

命令行安装vs2017(备记)

https://docs.microsoft.com/en-us/visualstudio/install/command-line-parameter-examples
Note
All commands require administrative elevation, and a User Account Control prompt will be displayed if the process is not started from an elevated prompt.
Note
You can use the ^ character at the end of a command line to concatenate multiple lines into a single command. Alternatively, you can simply place these lines together onto a single row. In PowerShell, the equivalent is the backtick (` ) character.
vs_enterprise.exe –lang en-US –add Microsoft.VisualStudio.Workload.CoreEditor ^
–add Microsoft.VisualStudio.Workload.NativeDesktop ^
–add Microsoft.VisualStudio.Workload.Node ^
–add Microsoft.VisualStudio.Component.VC.Tools.x86.x64 ^
–add Microsoft.VisualStudio.Workload.ManagedDesktop ^
–add Microsoft.VisualStudio.Component.NuGet ^
–add Microsoft.VisualStudio.Component.VC.140 ^
–add Microsoft.VisualStudio.Component.VC.CMake.Project ^
–add Microsoft.VisualStudio.Component.VC.Tools.x86.x64 ^
–add Microsoft.VisualStudio.Component.Windows10SDK.16299.Desktop ^
–add Microsoft.VisualStudio.Component.Windows10SDK ^
–add Microsoft.VisualStudio.Workload.Node ^
–wait –passive –norestart –installPath “C:\VS2017”