<b>本文讲的是使用重构件(Codemod)加速 JavaScript 开发和重构,</b>
在花园里耕耘乐趣无穷,但如果除草不勤,最后收获可能是一团揪心。漏掉一次除草本身可能并无大碍,但积少成多最后会毁掉整座花园。没有杂草的花园让维护工作神清气爽。这个道理对代码库也类似。
<a href="https://camo.githubusercontent.com/7e5f800391d5bbda90345a57384637f96c2ecda9/687474703a2f2f7777312e73696e61696d672e636e2f6c617267652f30303553694e787967773166336a3833686d6d72696a33306a6b3064766a736e2e6a7067" target="_blank"></a>
运行几个代码重构件后,我们的花园整洁了点:
鉴于多数重构件能在一分钟内处理上千文件,我发现它是我打发主要工作的等待间隙(例如等代码审查)的不错选择。它帮我最大化提升了工作效率从而让我能在更大和更重要的项目中有所建树。
大规模重构主要面临四大挑战。沟通、正确性、代码审查以及冲突合并。我采取以下策略来应对这些挑战。
重构件不总是能产出我需要的结果,因此对其结果的审查和改动十分重要。以下命令在跑完重构件后很有用:
保持每个提交和 PR 在小的体量是好的做法,对于重构件也不例外。我通常一段时间内进行一类重构,减少代码审查和冲突合并的麻烦。我亦经常让重构件自动提交重构结果,而后若有必要,再手动清理。这样在衍合分支时解决冲突会轻松点,因为我可以使用
然后在那个文件上再运行一次重构件,之后也不会弄乱我自己的手动提交。
为避免和别人的代码冲突,我通常在周五早上才推送我的重构件生成的提交,然后周一赶在大家开始工作之前进行衍合和合并。这样其他人周末放假前不被你的重构件阻碍,能好好整理自己的工作成果。
虽然此工具还比较新,已然有了一些实用的重构件。以下是一些我们成功上手了的。
以下是些用着不那么痛苦的,立刻上手感受成效。
使用前:
使用后:
以下重构件或是改动很多代码引发合并和冲突之痛,或是需要更多后续的手动更改以保证代码还能看得下去。
此重构件在有 mixin 的时候不会变换,在类似于 <code>propTypes</code>、默认 props 和 initial state 定义这样的必要转换做得很好,还能将事件回调函数绑定到构造器上。
这个会调整大量代码,git 不会自动合并冲突。我觉得在使用此重构件前最好最好跟队友打个招呼,在不太容易发生冲突的时候(例如周末)进行重构。当我衍合此重构的提交且遇上冲突的时候,我会:
然后再运行一次重构件。
因为我们多处用到字符串串联,而且这个重构件尽其所能把所有字符串都转成模板,我发现很多转换结果其实并不合理。我之所以这个重构件放到"重量级"列表里,是因为它会改动很多文件,而且之后我们还得进行大量的手动修改才能得到满意的结果。
若你想写自己的重构件,或是看看它能做什么,可以看下下面的资源。
在使用了一些现成的和我们自己写的并贡献给社区的重构件之后,我们的旧代码质量获得很大的提升。我不费吹灰之力便重构了40000行代码,将旧代码调整至符合 ES6 代码风格。花园焕然一新,我们之后的工作也更有效率和乐趣。
使用已有的重构件仅是牛刀小试,只有在你拿起键盘写出自己的重构件时,真正的能量才会释放。无论是对代码风格重构,或是对失效 API 的调整,重构件都能大显身手,你可以尽情想象发挥。这些技术值得学习投入,能省下你和使用你的项目使用者很多时间精力。
<b></b>
<b>原文发布时间为:2016年06月12日</b>
<b>本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。</b>