[译] 自定义 Babel 和 ESLint 插件是如何提升生产率与用户体验的

时间 2019-11-17

标签自定义 babel eslint 插件如何提升生产率用户体验繁體版

原文原文链接

原文地址：How writing custom Babel & ESLint plugins can increase productivity & improve user experience

原文做者：Kent C. Dodds

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：H2O2

校对者：MJingv，zyziyun

自定义 Babel 和 ESLint 插件是如何提升生产率与用户体验的

一个正在探索森林的人（来源：unsplash.com/photos/ZDhL…）javascript

自定义 Babel 和 ESLint 插件是如何提升生产率与用户体验的

并且比你想象的容易不少...html

个人前端大师课程「程序变换（code transformation）与抽象语法树（AST）」已经发布了🎉 🎊（进入网址查看课程的简介）！我以为大家应该都有兴趣了解为何要花上 3 小时 42 分钟来学习编写 Babel 和 ESLint 插件前端

构建应用程序是件困难的事，而且难度会随着团队和代码库的扩张而增大。幸运的是，咱们有诸如 ESLint 和 Babel 这样的工具来帮助咱们处理这些逐渐成长的代码库，防止 bug 的产生并迁移代码，从而让咱们能够把注意力集中在应用程序的特定领域上。java

ESLint 和 Babel 都有活跃的插件社区 (现在在 npm 上「ESLint plugin」能够搜索出 857 个包，「Babel Plugin」则能够搜索出 1781 个包)。正确应用这些插件能够提高你的开发体验并提升代码库的代码质量。react

尽管 Babel 和 ESLint 都拥有很棒的社区，你每每会遇到其余人都没遇到过的问题，所以你须要的特定用途的插件也可能不存在。另外，在大型项目的代码重构过程时，一个自定义的 babel 插件比查找/替换正则要有效得多。android

你能够编写自定义 ESLint 和 Babel 插件来知足特定需求webpack

应在何时写自定义的 ESLint 插件

ESLint logoios

你应该确保修复过的 bug 再也不出现。与其经过测试驱动开发（test driven development）达到这个目的，先问问本身：「这个 bug 是否是能够经过使用一个类型检查系统（如 Flow）来避免？」若是答案是否认的，再问本身「这个 bug 是否是能够经过使用自定义 ESLint 插件来避免？」这两个工具的好处是能够静态分析你的代码。git

经过 ESLint 你 不须要运行任何一部分代码便可判定是否有问题。github

除了上面所说的以外，一旦你添加了一个 ESLint 插件，问题不只在代码库的特定位置获得了解决，该问题在任何一个位置都不会出现了。这是件大好事！（并且这是测试没法作到的）。

下面是我在 PayPal 的团队使用的一些自定义规则，以防止咱们发布曾经出现过的 bug。

确保咱们一直使用本地化库而不是把内容写在行内。
强制使用正确的 React 受控组件（controlled component）行为并确保每一个 value 都有一个 onChange handler。
确保 <button> 标签老是有 type 属性。
确保 <Link> 组件和 <a> 标签老是有合理的 data 属性以解析数据。
确保只在某个应用或共享文件夹内部导入文件（咱们在一个仓库（repo）里有多个应用）。

咱们还有更多的规则，但总的来讲规则并很少。很赞的一点是，由于咱们花了时间去学习并编写自定义 ESLint 插件, 这些 bug 都没有再次出现。

注意：若是某个 bug 没法经过 Flow 或 ESLint 避免，那多是业务逻辑出了什么问题，你能够回到经过测试的方式来避免此类状况发生（学习如何测试 JavaScript 项目）。

应在何时写自定义的 Babel 插件

Babel logo

若是你在思索：「那个 API 实在太无趣了」或是「咱们不能那么作，运行效率过低。」那你就应该考虑写一个自定义的 babel 插件了。

Babel 插件容许你调整代码。这一操做既能够在编译时完成（以此来进行一些编译时的优化），也能够是一个一次性的操做（称为「codemod」，你能够把它想象成一种比正则表达式强得多的查找替换功能）。

我很喜欢 Babel 的一个缘由：

Babel 使咱们能够同时提高用户和开发者的体验。

下面的例子说明了 babel 插件是如何作到的这一点的。

在登录界面就加载整个应用十分浪费资源，所以社区采起了「code-splitting」来避免这种状况。react-loadable则实现了 React 组件的延迟加载。若是你想实现更复杂的功能（如服务器端支持或优化客户端加载），就须要相对复杂的 API 了，然而，babel-plugin-import-inspector 已经自动为你处理好这一切了。
Lodash 是一个使用很普遍的 JavaScript 实用程序库，但同时它也很大。一个小窍门是，若是你「cherry-pick」须要用到的方法（好比：import get from 'lodash/get'），只有你用到的那部分代码会被最终打包。babel-plugin-lodash 插件会让你正常使用整个库（import _ from 'lodash'）而后自动 cherry-pick 所需的方法。
我在构建 glamorous.rocks 网站（即将上线）时发现，不管用户使用的哪一种语言，全部本地化字符串都会被加载！因此我写了一个自定义的 babel 插件基于 LOCALE 环境变量加载正确的本地化字符串。这样咱们就能够为每种语言建立一个服务端渲染网站的静态输出，并开始在服务器端为本地化字符串使用 markdown 了（而咱们以前会在 JavaScript 模块里使用 markdown 的字符串，彻底是一团乱）。咱们能够再也不使用使人混乱的「高阶组件（Higher Ordered Component）」来进行本地化，而能够在服务器上导入 markdown 文件。最终网站变得更快且对开发者更友好了。

还有不少例子，不过但愿这些已经足够让你认识到自定义 Babel 插件所带来的可能性了。

哦对了，你知道那些随着框架和工具主要更新一块儿推出的 codemods 吗？它们会像施魔法同样 ✨ 把你的代码更新到最新的API（好比 React 的这个 codemod 或者 webpack 的这个 codemod）。你能够把那些工具写成 babel 插件而后经过 babel-codemod 运行（看看这个 babel-codemod 的演示）。（经过这篇演讲深刻了解 codemods，演讲者 Chirstoph）。

我无论你的正则表达式用得有多好，自定义 babel 插件可让你作得更好。

可是到底什么是 AST？我可不是什么火箭专家 🚀 ！

astexplorer.net 上一个名为「你也许不须要 jQuery」的 babel 插件演示。打开连接：kcd.im/asteymnnj
Babel 和 ESLint 都以一个名为抽象语法树（Abstract Syntax Tree，常缩写为 AST）的结构为基础运行。实际上这就是计算机如何读取代码的。Babel 有一个名为「babylon」的 JavaScript 语法分析器，能够把代码字符串变成一个 AST（其实就是一个 JavaScript 对象），而后 Babel 把一些片断提供给 babel 插件来让你操做。若是是 Babel 则你能够作一些变形，若是是 ESLint 则你能够检查你不但愿出现的规则。

我没有计算机科学的文凭。我一年前才开始学习 AST。

和 AST 打交道帮助我更深入地理解了 JavaScript。

尝试一下

我保证，这远没有你想象的困难😱。你能够学好的。我会给你一步步地解释。并且这门课还有不少很是好的练习帮助你进步。学习如何编写自定义的 ESlint 和 Babel 插件会对你的软件开发之路有帮助，而且会让你的应用变得更好 👍。

学习程序变换以及使用抽象语法树进行 lint

分享一下吧

自定义插件是一个每每使人们生畏或疑惑的主题。若是这篇博文增进了你的理解，请分享给更多人，让他们了解到学习编写自定义 Babel 和 ESLint 插件是多么重要的技能。你能够经过 Medium 的 💚 分享，发推分享，或者转推：

再见！ @kentcdodds

P.S. 还有一些其余（免费）的资源能够帮助你学习 AST。

P.S.P.S 我以为我应该提一下我最近写的两个 babel 插件，它们让我感到很兴奋（I’m not alone either）我以为大家应该看看这些插件。这两个插件的最第一版本我都只写了半个小时：

babel-plugin-preval: 在编译时预分析代码
babel-macros: 使 babel 插件无需配置便可直接导入

在课程里，我会把全部编写这样的插件须要的知识教给你。

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、React、前端、后端、产品、设计等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。