Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Aug 17, 2017

Conversation

H2O-2
Copy link
Contributor

@H2O-2 H2O-2 commented Aug 8, 2017

resolve #1997

H2O-2 and others added 2 commits August 8, 2017 09:19
@MJingv
Copy link

MJingv commented Aug 9, 2017

@sqrthree 校对认领

@linhe0x0
Copy link
Member

linhe0x0 commented Aug 9, 2017

@MJingv 好的呢 🍺

@zyziyun
Copy link
Contributor

zyziyun commented Aug 9, 2017

@sqrthree 校对认领

@linhe0x0
Copy link
Member

linhe0x0 commented Aug 9, 2017

@zyziyun 妥妥哒 🍻

@linhe0x0
Copy link
Member

@MJingv @zyziyun 两位不要忘了来校对啊

@H2O-2
Copy link
Contributor Author

H2O-2 commented Aug 13, 2017

@MJingv @zyziyun 二位是不是可以考虑来校对了。。。。

@@ -3,123 +3,122 @@
> * 原文作者:[Kent C. Dodds](https://medium.com/@kentcdodds)
> * 译文出自:[掘金翻译计划](https://github.com/xitu/gold-miner)
> * 本文永久链接:[https://github.com/xitu/gold-miner/blob/master/TODO/how-writing-custom-babel-and-eslint-plugins-can-increase-your-productivity-and-improve-user.md](https://github.com/xitu/gold-miner/blob/master/TODO/how-writing-custom-babel-and-eslint-plugins-can-increase-your-productivity-and-improve-user.md)
> * 译者:
> * 译者:[H2O2](https://github.com/H2O-2)
> * 校对者:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- 确保我们一直使用本地化库而不是把内容写在行内。
- 强制使用正确的 React 受控组件(controlled component)行为并确保每个 `value` 都有一个 `onChange` handler。
- 确保 `<button>` 标签总是有 `type` 属性。
- 确保 `<Link>` 组件和 `<a>` 标签总是有合理的 `data` 属性以存储数据。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

analytics 以存储数据 =》以解析


There are way more, but hopefully that gives you an idea of what’s possible when you know how to write custom Babel plugins.
还有很多例子,不过希望这些已经让你能够认识到自定义 Babel 插件所带来的可能性了。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不过希望这些已经让你能够认识到自定义 Babel 插件所带来的可能性了 => 不过希望这些已经能让你在写代码中能够认识到自定义 Babel 插件所带来的可能性了

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这句感觉怪怪的,自己也翻译的不好,希望再斟酌一下🙏

@MJingv
Copy link

MJingv commented Aug 13, 2017

@sqrthree @H2O-2 校对完成

@H2O-2
Copy link
Contributor Author

H2O-2 commented Aug 13, 2017

@MJingv @sqrthree 感谢校对~ 一校完成


P.S.P.S. I thought I’d mention two babel plugins I’ve written recently that I’m pretty excited about ([I’m](https://twitter.com/threepointone/status/885884698093899777)[not](https://twitter.com/mitchellhamiltn/status/886441807420182528)[alone](https://twitter.com/rauchg/status/886449097770541057)[either](https://twitter.com/souporserious/status/886803870743121920)). I think you should really take a look at these. I wrote the first working version of each of them in about a half hour:
P.S.P.S 我觉得我应该提一下我最近写的两个 babel 插件,它们让我感到很兴奋([I’m](https://twitter.com/threepointone/status/885884698093899777)[not](https://twitter.com/mitchellhamiltn/status/886441807420182528)[alone](https://twitter.com/rauchg/status/886449097770541057)[either](https://twitter.com/souporserious/status/886803870743121920))(校对完成后删除:这里作者在各种搞笑。。。我就不翻译了= =)我觉得你们应该看看这些插件。这两个插件的最初版本我都只写了半个小时:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

『I’m not alone either』这里单词间加个空格吧。


In addition to this, once you’ve added an ESLint plugin, you’ve not only prevented the problem from entering that particular area of your codebase, **you’ve also prevented it from showing up anywhere else as well.** That’s a real win! (And that’s a benefit you do not have with testing).
除了上面所说的之外,一旦你添加了一个 ESLint 插件问题不仅在代码库的特定位置得到了解决,**该问题在任何一个位置都不会出现了。**这是件大好事!(而且这是测试无法做到的)。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sqrthree 请问这里需要改的是什么?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

星号啊。Markdown 标记有点小问题,GitHub 解析出错了。


**I promise you, this is way less scary than it seems 😱.** You can learn this stuff. I’ll walk you through it. And the course has a bunch of great exercises to help you get going. Learning how to write custom ESLint and Babel plugins can improve your life as a software developer and make your applications better 👍
**我保证,这远没有你想象的困难 😱。**你可以学好的。我会给你一步步地解释。而且这门课还有很多非常好的联系帮助你进步。学习如何编写自定义的 ESlint 和 Babel 插件会对你的软件开发之路有帮助,并且会让你的应用变得更好 👍。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

@zyziyun
Copy link
Contributor

zyziyun commented Aug 14, 2017

@sqrthree @H2O-2 校对完成(抱歉,最近有些事情,没有抓紧校对。。。)

@H2O-2
Copy link
Contributor Author

H2O-2 commented Aug 14, 2017

@zyziyun 诶,我没看到你的comment啊,是没有要改的吗。。。。


*And it’s way more approachable than you think…*
**而且比你想象的容易很多...**

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

『而且比你想象的容易很多...』=>『它们比你想象的容易的多』

> * 校对者:

# How writing custom Babel & ESLint plugins can increase productivity & improve user experience
# 自定义 Babel ESLint 插件是如何提高生产率与用户体验的

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

『自定义 Babel 和 ESLint 插件是如何提高生产率与用户体验的』=>『如何写一个 Babel 或 ESLint 插件来提高整个项目的效率和提升用户体验?』
(感觉宽泛些的标题会更加吸引人?)


Building applications is hard, and it just gets harder as a team and codebase grows. Luckily, we have tools like [ESLint](http://eslint.org/) and [Babel](https://babeljs.io/) to help us manage these growing codebases to prevent bugs and migrate code so we can focus on the domain-specific problems of our applications.
构建应用程序是件困难的事,并且难度会随着团队和代码库的扩张而增大。幸运的是,我们有诸如 [ESLint](http://eslint.org/) 和 [Babel](https://babeljs.io/) 这样的工具来帮助我们处理这些逐渐成长的代码库,防止 bug 的产生并迁移代码,从而让我们可以把注意力集中在应用程序的特定领域。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

『帮助我们处理这些逐渐成长的代码库,防止 bug 的产生并迁移代码,从而让我们可以把注意力集中在应用程序的特定领域。』=>『帮助我们更好的提高代码的可维护性,提高多人协作的效率,防止部分 bug 的产生,降低代码的更新维护成本,从而让我们可以把注意力集中在具体业务场景的应用程序代码编写上。』


Both ESLint and Babel have a strong community of plugins (today, there are 857 packages matching [“ESLint plugin”](https://www.npmjs.com/search?q=eslint%20plugin&amp;page=1&amp;ranking=optimal) and 1781 matching [“Babel Plugin”](https://www.npmjs.com/search?q=babel%20plugin)). You can leverage these plugins to improve your developer experience and increase the quality of your codebase.
ESLint 和 Babel 都有活跃的插件社区 (如今 [「ESLint plugin」](https://www.npmjs.com/search?q=eslint%20plugin&amp;page=1&amp;ranking=optimal) 可以搜索出 857 个包,[「Babel Plugin」](https://www.npmjs.com/search?q=babel%20plugin) 则可以搜索出 1781 个包)。正确应用这些插件可以提升你的开发体验并提高代码库的代码质量。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

『如今 「ESLint plugin」 可以搜索出 857 个包,「Babel Plugin」 则可以搜索出 1781 个包』=>『如今在 npm 上可以搜索出关于 ESLint 的插件 857 个 「ESLint plugin」 ,关于 Babel 的插件 1781 个「Babel Plugin」 。』


As amazing as the communities are for both Babel and ESLint, the problems you’re facing are often different from the problems the rest of the world faces, so there’s often not an existing plugin to handle your specific use case. In addition, sometimes you need to refactor a big codebase and a custom babel plugin can help do so much better at this than a find/replace regex.
尽管 Babel 和 ESLint 都拥有很棒的社区,你往往会遇到全世界都没遇到过的问题,因此你需要的特定用途的插件也往往不存在。另外,有时候重构代码库时,一个自定义的 babel 插件比查找/替换正则要有效得多。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

『你往往会遇到全世界都没遇到过的问题,因此你需要的特定用途的插件也往往不存在。另外,有时候重构代码库时,一个自定义的 babel 插件比查找/替换正则要有效得多。』=>『但是你还是会遇到一些社区内没有很好解决方案的问题,也会遇到你需要的插件不存在的情况。还有,在大型项目的代码重构过程中,自定义一个 babel 插件比查找/替换正则要高效的多。』


> Babel allows us to enhance both the user experience and the developer experience at the same time.
> Babel 使我们可以同时提升用户和开发者的体验。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

『Babel 使我们可以同时提升用户和开发者的体验。』=>『Babel 的使用可以让我们兼顾用户体验与开发体验。』

2. [Lodash](https://lodash.com/) is a fairly ubiquitous utility library for JavaScript, but it’s also quite large. One neat trick is that if you “cherry-pick” the methods you actually use (like: `import get from 'lodash/get'`), the code for those will be the only ones that end up in your final bundle. [babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash) allows you to use the entire library as you normally would (`import _ from 'lodash'`) and it will automatically cherry-pick methods for you.
3. While building the [glamorous.rocks](https://rc.glamorous.rocks/) website (soon to be released), I realized that we were loading all localization strings regardless of what language you were requesting! So I wrote [a custom babel plugin](https://github.com/kentcdodds/glamorous-website/blob/7ab245a4f99af9f217fd9b7d63f59dae1814f08e/other/babel-plugin-l10n-loader.js) to load the right localization based on a `LOCALE` environment variable. This enabled us to create a [static export of the server rendered site](https://github.com/zeit/next.js/blob/dba24dac9db97dfce07fbdb1725f5ed1f9a40811/readme.md#static-html-export) for each locale we support and start using markdown for our localization strings on the server (whereas we’d been using markdown in strings in JavaScript modules before, a total mess). We were able to get rid of a confusing “Higher Order Component” for localization and just start importing markdown files *on the server.* At the end of it all, the site is way faster and it’s much more pleasant to work with ([contributions to glamorous.rocks are welcome](https://github.com/kentcdodds/glamorous-website/issues)).
1. 在登陆界面就加载整个应用十分浪费资源,因此社区采取了「[code-splitting](https://webpack.js.org/guides/code-splitting/)」来避免这种情况。[react-loadable](https://github.com/thejameskyle/react-loadable)则实现了 React 组件的延迟加载。如果你想实现更复杂的功能(如服务器端支持或优化客户端加载),就需要相对复杂的 API 了,然而,[babel-plugin-import-inspector](https://github.com/thejameskyle/react-loadable/blob/3a9d9cf34abff075f3ec7919732f95dc6d9453a4/README.md#babel-plugin-import-inspector) 已经自动为你处理好这一切了。
2. [Lodash](https://lodash.com/) 是一个使用很广泛的 JavaScript 实用程序库,但同时它也很大。一个小窍门是,如果你「cherry-pick」需要用到的方法(比如:`import get from 'lodash/get'`),只有你用到的那部分代码会被最终打包。[babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash) 插件会让你正常使用整个库(`import _ from 'lodash'`)然后自动 cherry-pick 所需的方法。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

『如果你「cherry-pick」需要用到的方法(比如:import get from 'lodash/get'),只有你用到的那部分代码会被最终打包。[babel-plugin-lodash]』=>『如果你只想用其中的几个方法(「cherry-pick」),你肯定希望只有你用到的那些方法所对应的代码被打包到最终的项目中,这时候可以使用 [babel-plugin-lodash] 这个插件。』


I do not have a computer science degree. I started learning about ASTs just a year ago.
我没用计算机科学的文凭。我一年前才开始学习 AST。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

『我没用计算机科学的文凭。我一年前才开始学习 AST。』=>『我没有计算机专业的文凭,一年前才开始学习 AST的。』


> The experience of working with ASTs has helped me to understand JavaScript better.
> 和 AST 打交道帮助我更深刻地理解了 JavaScript。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

『和 AST 打交道帮助我更深刻地理解了 JavaScript。』=>『学习 AST 的原理使我更深刻地理解了 JavaScript。』


**I promise you, this is way less scary than it seems 😱.** You can learn this stuff. I’ll walk you through it. And the course has a bunch of great exercises to help you get going. Learning how to write custom ESLint and Babel plugins can improve your life as a software developer and make your applications better 👍
**我保证,这远没有你想象的困难 😱。**你可以学好的。我会给你一步步地解释。而且这门课还有很多非常好的联系帮助你进步。学习如何编写自定义的 ESlint 和 Babel 插件会对你的软件开发之路有帮助,并且会让你的应用变得更好 👍。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

『而且这门课还有很多非常好的联系帮助你进步。』=>『这门课还有很多非常好的实践方式帮助你进步。』

@zyziyun
Copy link
Contributor

zyziyun commented Aug 14, 2017

@H2O-2 有啊,好像我只在file change上加了comment,没有加到review里,现在应该有了吧?

@H2O-2
Copy link
Contributor Author

H2O-2 commented Aug 15, 2017

@sqrthree @zyziyun 感谢二校~ 校对完成

> * 译者:
> * 校对者:
> * 译者:[H2O2](https://github.com/H2O-2)
> * 校对者:[MJingv](https://github.com/MJingv)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

还有一位校对者信息没有加呢


In addition to this, once you’ve added an ESLint plugin, you’ve not only prevented the problem from entering that particular area of your codebase, **you’ve also prevented it from showing up anywhere else as well.** That’s a real win! (And that’s a benefit you do not have with testing).
除了上面所说的之外,一旦你添加了一个 ESLint 插件,问题不仅在代码库的特定位置得到了解决,**该问题在任何一个位置都不会出现了。**这是件大好事!(而且这是测试无法做到的)。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image


**I promise you, this is way less scary than it seems 😱.** You can learn this stuff. I’ll walk you through it. And the course has a bunch of great exercises to help you get going. Learning how to write custom ESLint and Babel plugins can improve your life as a software developer and make your applications better 👍
**我保证,这远没有你想象的困难😱。**你可以学好的。我会给你一步步地解释。而且这门课还有很多非常好的练习帮助你进步。学习如何编写自定义的 ESlint 和 Babel 插件会对你的软件开发之路有帮助,并且会让你的应用变得更好 👍。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

@H2O-2
Copy link
Contributor Author

H2O-2 commented Aug 16, 2017

@sqrthree 修改完成~ 之前没理解你说的星号是什么问题,原来句号会影响粗体显示,不好意思。。。。

@linhe0x0 linhe0x0 merged commit 90c1795 into xitu:master Aug 17, 2017
@linhe0x0
Copy link
Member

@H2O-2 已经 merge 啦~ 快快麻溜发布到掘金专栏然后给我发下链接,方便及时添加积分哟。

@H2O-2
Copy link
Contributor Author

H2O-2 commented Aug 17, 2017

RichardLeeH pushed a commit to RichardLeeH/gold-miner that referenced this pull request Aug 18, 2017
…slate

# By sqrtthree (47) and others
# Via GitHub (4) and others
* 'master' of https://github.com/xitu/gold-miner: (164 commits)
  update advices from @sqrthree
  ✨ Create how-to-do-proper-tree-shaking-in-webpack-2.md
  update for @LouisaNikita's proofreading
  Update why-i-havent-fixed-your-issue-yet.md
  Update why-i-havent-fixed-your-issue-yet.md
  iOS 响应式编程:Swift 中的轻量级状态容器 (xitu#2013)
  自定义 Babel 和 ESLint 插件是如何提高生产率与用户体验的 (xitu#2025)
  ✨ Create web-fonts-when-you-need-them-when-you-dont.md
  ✨ Create under-the-hood-of-futures-and-promises-in-swift.md
  update proofreader @sunui
  update for @sunui's proofreading
  ✨ Create how-to-write-a-perfect-error-message.md
  ✨ Create how-i-do-developer-ux-at-google.md
  ✨ Create v8-behind-the-scenes-november-edition.md
  Other mentions
  fix typos (xitu#2058)
  🚀 添加文章『深度学习系列4: 为什么你需要使用嵌入层』到文章列表
  🚀 添加文章『使用 Node.js 搭建一个 API 网关』到文章列表
  🚀 添加文章『AI 能解决你的 UX 设计问题吗?』到文章列表
  🚀 添加文章『理解 Service Worker』到文章列表
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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