React 17 以降での import React の削除を実行する npm scripts

概要

React 17 以降では、import * as React from 'react'; は削除が可能です。
このステートメントは npx react-codemod update-react-imports を実行することで自動削除が可能¹ですが、いくつかの対話的な質問に答える必要があります。
この対話的な操作なしに実行を完了させるためのコマンドを考えます。

結論

• src ディレクトリ以下を対象に、TypeScript を使用しており、import * の変換も対象とする場合
• その他の設定値は以下の「解説」セクションを参照

{
  "scripts": {
    "update-react-imports": "echo yes | npx react-codemod update-react-imports src --force --parser tsx"
  }
}

解説

単純に npx react-codemod update-react-imports を実行した場合、git の差分があると以下のメッセージが表示され、実行は中断されます。
そこで、メッセージに従い --force オプションを追加します。

$ npx react-codemod update-react-imports

Thank you for using react-codemods!

But before we continue, please stash or commit your git changes.

You may use the --force flag to override this safety check.

続いて npx react-codemod update-react-imports --force を実行すると、以下の3つの質問に答える必要がありました。

• ? On which files or directory should the codemods be applied?
• ? Which dialect of JavaScript do you use?
• ? Destructure namespace imports (import *) too?

1つ目の対象パスに関しては、help を見ると npx react-codemod <transform> <path> <…options> の形式で記述できるとあるように、<path> を指定すれば OK です。

2つ目の JS/TS の選択については、ソースコード²を見ると、--parser オプションにて指定が可能なことが分かりました。
JavaScript なら babel、JavaScript with Flow なら flow、TypeScript なら tsx となります。

3つ目の import * を必要なモジュールのみのインポートに修正するか否かについては、同じくソースコード³を見ると、オプション等で事前指定することができず、必ず聞かれてしまう項目のようです。
そこで echo yes をパイプすることで対応しました。
（質問に no と答えたい場合は echo no に変更してください。）
（yes コマンドでは無駄な y が出力されてしまい、今回は1度で十分なのでこのような記述としています。）

以上をまとめると echo yes | npx react-codemod update-react-imports src --force --parser tsx のようなコマンドとなり、npm scripts として package.json に記述する場合は、「結論」のセクションの通りとなります。
（以下に再掲）

{
  "scripts": {
    "update-react-imports": "echo yes | npx react-codemod update-react-imports src --force --parser tsx"
  }
}

脚注

1. https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports ↩︎
2. https://github.com/reactjs/react-codemod/blob/ebe9dccc5308a5c7f9ab9e9061498436c2c5fe86/bin/cli.js#L276-L284 ↩︎
3. https://github.com/reactjs/react-codemod/blob/ebe9dccc5308a5c7f9ab9e9061498436c2c5fe86/bin/cli.js#L372-L383 ↩︎