1.起因
时隔一年，油猴脚本系列又来了，起因是那天洗澡的时候，突然灵光一闪，想到平时在前端开发中，有很多工作完全是一些机械的，没有什么难度的活，但是又异常的花时间！其实就是对一些表格字段。
目前为止我还在开发之前的那个百万级ERP项目，项目中的列表非常的多，目前大概有几百个吧，而且每个列表都有非常多的字段，通常情况下都在20个字段左右，而后端写的时候会在对应的接口中返回一大堆字段，你需要从返回的字段中挑选出列表中需要的字段。
可能一个两个还好，但是几十个几百个列表一个字段一个字段的对起来就很耗时耗力，所以这个时候我就有一个想法：有没有那么一种方法，将原型图上列表字段提取出来，然后与swagger中该接口下面的字段注释做一个对比，如果对的上，则生成Antd可以使用的表头代码，如果没有对上，那么就统一将这些没有对上的字段展示出来，然后用肉眼去对，如果依然没有找到这些字段，那么就发给后端，让后端添加上这些字段。
一想到这个可能性，马上就想迫不及待的想要进行实现，这时我回忆起一年前用过油猴脚本做了一些事情，那么这次这个突发奇想是否也可以用油猴脚本进行实现。
2.油猴脚本我在去年已经写过几篇关于油猴脚本的文章，其中提到过通过Webpack打包，可以开发特别复杂的脚本，甚至可以开发一些工程级的脚本，同时也可以使用npm上的包。
但是由于webpack配置的复杂性，所以我首先是没有考虑使用webpack打包工具的，而是先想到了另一个零配置打包工具：parcel。
但是很遗憾，失败了，不知道为什么通过parcel打包后的js文件直接通过油猴引入外部资源的方法会报错，于是这个时候我还想到了一个打包js文件的工具：Rollup。
遗憾的是，同样失败了，不知道为什么引入油猴后就是会报错，于是这个时候我就放弃抵抗，选择了webpack进行打包，结果不出意料，webpack打包后的js文件引入油猴中没有任何问题。
因为我之前已经这么做过了，还总结了相关的文章：强大的油猴Tampermonkey脚本开发环境搭建，所以关于油猴的基础部分就不再赘述。
2.1打包的好处为什么要通过webpack打包？
因为在编写一些复杂脚本时，我们往往会需要使用到非常多的库，而且也会将脚本进行模块化，分成非常多的文件，同时如果你还想编写一些CSS样式，那么你也可以直接写CSS文件或者Less或者Sass文件，通过webpack可以将这些文件统一起来，打包成一个js，然后通过油猴提供的外部引入方式进行引入。
随着我对React越发的得心应手，要实现上面说的自动比对字段的功能React也是不可少的一环，而我个人非常喜欢使用TypeScript，因为它会给予代码更多的提示，让你在写代码的时候不容易犯一些低级错误。
而使用React的时候就不得不提到Antd，Antd这个UI组件库提供了非常多的方便的组件，不光是解决了一些样式问题，同时它还解决了很多交互层面的东西，比如它的Form表单，也是非常好用的。
综上所述，如果你要开发一个油猴脚本，那么通过webpack进行打包就是一个非常好的选择。
3.jQuery正如我年前的那篇文章所说，jQuery是一个非常值得学习的库，因为对于编写油猴脚本来说，没有什么比用jQuery去提取界面上的信息更方便的了。
由于jQuery的易用性，使用jQuery你可以轻易的从界面上提取到你要的信息，虽然使用正则可以达到差不多的效果，但jQuery代码写起来比正则更快，也更不容易出错。
4.正则编写脚本，非常多的情况会使用到正则，因为要精确的匹配到对应的字符，正则是你的不二之选，在做一些自动生成代码工具的时候，因为涉及到字符匹配的问题，学会正则就显得非常的重要。
这里就要推荐一个非常好的正则测试网站：RegExr:学习、构建和测试正则表达式TestRegEx，因为有时候你无法判断你写的正则对不对，所以这个时候你就可以先在这个网站上面测试一下，如果测试结果符合你的预期，再将正则表达式复制到你的项目中进行测试，这样编写起正则来就方便的多，使用方法也非常简单，去该网站上面点两下大致就能明白如何使用。
5.爬虫基础如果你要提取一些界面上的信息，那么你得会一些爬虫基础知识，知道怎么获取到界面上的某些信息。
理论上一个网页上面所有的信息，都能通过正则表达式进行提取，但由于正则表达式在编写的过程中可能会比较容易出错，这个时候jQuery就能有效的帮你提取出这些页面数据。
这里就对爬虫入门时90%的人都会选择的豆瓣排行榜做一个页面信息提取。
6.实例上面所想的那个脚本我其实已经实现了，但碍于swagger上面有公司项目的接口信息，所以这里就不拿那个脚本作为演示。