create-react-app すごい。React アプリを開発する環境構築が圧倒的に楽になった。
開発も素早く始められて build も一瞬で出来るように用意されている。Rails なんかもこうやって参入障壁を下げていくことで広まったのかなと思う。
npm run eject
まだ始めてみたばかりで諸々見ている最中なのだが、用意されている npm コマンドの中に一つだけよくわからない npm run eject というのがあったので調べた。
TL;DR
npm run eject は create-react-app の裏側で react-script を介して使われている諸々のツール・スクリプトをコピーしたり、依存関係を package.json に書き込んだりして、自分で用意したのと同じ状態にするコマンド。実行以降、好きにカスタマイズし放題となる。
これがいつでも出来るのでロックインを回避できる、create-react-app が死んでもアプリケーション側で自前でこれらのツールを制御することが出来る。
つまり、create-react-app はこのツールよりも、アプリケーションの方が長いライフサイクルを持てることを保証するということ。
多くのユーザーから使われるツールになるためにここまで考えているのは純粋に凄いと思う。
公式
You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. https://github.com/facebookincubator/create-react-app#philosophy
"カスタマイズ用にいつでも「取り出す (eject) 」ことができる。 単一のコマンド ( npm run eject ) を実行するだけで、すべての構成とビルドの依存関係がプロジェクトに直接移動されるため、中断した箇所からすぐに再開できる。"
If you’re a power user and you aren’t happy with the default configuration, you can “eject” from the tool and use it as a boilerplate generator.
Running npm run eject copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like npm start and npm run build will still work, but they will point to the copied scripts so you can tweak them. At this point, you’re on your own.
Note: this is a one-way operation. Once you eject, you can’t go back!
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. https://github.com/facebookincubator/create-react-app#converting-to-a-custom-setup
"もし「パワーユーザー」としてデフォルト設定に満足できない場合は、ツールから「取り出し」てボイラープレートジェネレータとして使用できる。
npm run eject を実行すると、すべての設定ファイルと依存関係（Webpack、Babel、ESLint etc.）がプロジェクトに完全にコピーされるので、完全に制御できます。npm start や npm run build のようなコマンドは引き続き動作する。これらはコピーされたスクリプトなのでカスタマイズが可能になる。
注: これは片方向操作であり、 いったん eject したらもう戻れない！
eject を使用する必要はない。キュレーションされた機能セットは、小規模から中規模の開発に適しており、この機能 (eject) を使用する必要はない。 "
npm run eject 試す
実際に何が起きるか試してみる。
$ create-react-app hello $ cd hello $ npm run eject # and answer `y`
実行前後の Diff
長いので特に解説しないが、特に pakage.json を見ることで使われているツールが見て取れる。
