codemod

关注「 前端向后 」微信公众号，你将收获一系列「用 心 原创」的高质量技术文章，主题包括但不限于前端、Node.js以及服务端技术 一.什么是前端工程？ 一个类似的术语是软件工程（Software Engineering）： Software engineering is the systematic application of engineering approaches to the development of software. 将工程方法系统化地应用到软件开发中，就叫软件工程 。那么，紧接着又有两个问题： 工程方法是什么？ 系统化怎么理解？ 工程是指使用科学原理设计和制造机器、结构等，比如修桥、铺路、建隧道、造车、盖房子： Engineering is the use of scientific principles to design and build machines, structures, and other items, including bridges, tunnels, roads, vehicles, and buildings. 具体到软件领域，指的是 以系统、严谨、可量化的方法开发、运营、维护软件 ，软件工程包括对这些方法的应用和研究： Software engineering the application of a systematic,

过去，我一直想着抽时间写一个小的前端工具，以对代码进行自动化的重构。但是呢，经过我再三的考虑，我暂时取消了这个打算 —— 主要是没时间。（PS：人生长乐，写个 Charj） 但是呢，我打算写一篇文章记录一下相关的思路。 原因依据很多： 大部分国内的公司使用的都是 Vue，template、script、style 都耦合在一起； 大量的前端项目都是轻逻辑，不具有复杂的业务场景 前端系统被重写的频率太快了 JavaSript 语法太灵活，而 TypeScript 还未普及 …… 简单来说，在缺乏复杂场景的情况下，我不太想去写这样的工具。 如何构建前端自动化重构工具？ 在我之前写的那篇『重构的自动化』中，介绍了如何去做这样的工具： 构建特定语言的语法解析器。 设定代码坏味道的内容及标准。 针对于每一项坏味道，编写识别代码。 编写代码坏味道的建议改进和实施代码。 实现坏味道的自动化重构。 以 Vue 为例，这个过程便是： 寻找适用于 Vue 的 AST 生成工具。如 eslint-vue-parser 寻找和编写适用于 Vue 编码的相关规范。 对应规范寻找代码中的问题。 针对该问题寻找改进点 实现自动化重构 让我们来看个简单的示例，如我们的代码规范中，针对于 组件库 强制规范了一定要写 scoped 。而我们有大量的组件都没有相应的实践。这个时候，就可以通过这种方式来处理

【推荐阅读】微服务还能火多久？>>> 生命周期函数指的是组件在某一时刻会自动执行的函数 constructor可以看成一个类的普通生命周期函数，但不是react独有的生命周期函数 render() 是数据发生变化时会自动执行的函数，因此属于react的生命周期函数 mounting只在第一次渲染时会执行 import React,{Component} from 'react' ; class Counter extends Component{ constructor(props){ super(props); console.log( 'constructor' ); } componentWillMount(){ console.log( 'componentWillMount' ); } componentDidMount(){ console.log( 'componentDidMount' ); } render(){ console.log( 'render' ); return ( <div>hello react</div> ) } } export default Counter; 可以看到代码有提示：componentWillMount has been renamed, and is not recommended for use. 这是因为React 16