@3846masa-tmp/javascript-ast-demo

技術書典 7 で頒布した 『AbemaTV TECH BOOK』第 1 章 「JavaScript AST から目覚めるぼくらのリファクタリング」のサンプルコードです。

概略

「ES Modules の alias import」を題目に jscodeshift / ESLint / Babel のプラグインを作ることで、 JavaScript AST に触れられるハンズオンです。

---

jscodeshift と ESLint のプラグインでは、alias import を取り除くプラグインを作ります。

実際のコード

Before

import { filter as filterRx } from 'rx/operators';
import { handleError } from './error-handler';

subject$
  .pipe(filterRx((value) => !!value))
  .subscribe((value) => console.log(value), handleError);

After

import { filter } from 'rx/operators';
import { handleError } from './error-handler';

subject$
  .pipe(filter((value) => !!value))
  .subscribe((value) => console.log(value), handleError);

---

Babel のプラグインでは、alias import を使って変数名を短縮する mangle 処理を書きます。

実際のコード

Before

import { filter as filterRx } from 'rxjs/operators';
import { isNotUndefined } from 'option-t/lib/Undefinable';
import { handleError } from './error-handler';

subject$
  .pipe(filterRx(isNotUndefined))
  .subscribe((value) => console.log(value), handleError);

After

import { filter as A } from 'rxjs/operators';
import { isNotUndefined as B } from 'option-t/lib/Undefinable';
import { handleError as C } from './error-handler';
subject$.pipe(A(B)).subscribe((value) => console.log(value), C);