create-react-appが生成したファイルを読む

今更ながらreact入門をしてるんだけど、webpack周りとか分からないことが多いのでちょっとずつ勉強している。

今日は簡単にreactアプリの雛形が作れるcreate-react-appが生成してくれたプロジェクトで

npm run eject

した時に生成されるファイルを読んで、何をやってるのかを調べた。

準備

npm i -g create-react-app
create-react-app react-app
cd react-app
npm run eject

上記を実行すると以下のようなファイルが生成される。

~/D/s/react-app ❯❯❯ tree -I node_modules
.
├── README.md
├── config
│   ├── env.js
│   ├── jest
│   │   ├── CSSStub.js
│   │   └── FileStub.js
│   ├── paths.js
│   ├── polyfills.js
│   ├── webpack.config.dev.js
│   └── webpack.config.prod.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── scripts
│   ├── build.js
│   ├── start.js
│   └── test.js
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── logo.svg

これらを一つずつ眺めていく。

ディレクトリ構成

config

その名の通り設定ファイルが置いてある。

public

そのまま公開する静的コンテンツを配置するところ。

scripts

npm runコマンドで実行するスクリプトの実体が置いてある。

src

ビルド前のcssやjsファイルが置いてある。

logo.svgがなぜここにあるのかは今のところ不明。

package.json

依存ファイル、scriptsコマンドの設定や、babel, eslint, jestの設定が書いてある。

あんまり特筆すべきことは無さそう。

configファイル

config/env.js

環境変数設定用。

localの環境変数にREACT_APP_*, NODE_ENV, PUBLIC_URLという名前の環境変数があればハッシュマップに詰めて返す。

config/jest/

単体テストで使うファイルモックか何かの設定っぽい。 よくわからなかったので、おいおい調べる。

config/paths.js

webpackで使うモジュールやindex.js等のパスを設定している。

module.exports = {
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/index.js'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
  ownNodeModules: resolveApp('node_modules'),
  nodePaths: nodePaths
};

resolveApp(path)はアプリのディレクトリからの相対パスに変換してくれる関数。 webpack.configではここで設定したパス変数を使って設定を行っている。

config/polyfills.js

実行環境にPromiseとかFetchとかObject.assignがなければpolyfillを設定してくれる。

config/webpack.config.dev.js, config/webpack.prod.js

webpackの設定が書かれたファイル。

NODE_ENVで切り替えられるのかと思ったけど、デフォルトでは

• npm run start - > config/webpack.config.dev.js
• npm run build -> config/webpack.config.prod.js

で決め打ちっぽい。(要検証)

scripts

scripts/start.js

npm run startで呼び出されるscript。

開発用ビルドと開発用サーバの起動を行う。

真面目に読んで一個一個書こうかと思ったけど思ったより長かったので割愛。

主にコンパイル結果のハンドリング(メッセージ出力等)、historyApiFallbackやhttpProxy等のミドルウェアの追加、webpackサーバの起動を行っている。

前述の通りstartはdevelopmentモードで決め打ちになっているので、webpack.config.dev.jsに記載された設定でビルドされる。

scripts/build.js

npm run buildで呼び出されるscript。

productionに配置するためのファイルをビルドする。

実行するとbuildディレクトリ下に本番デプロイ可能な静的ファイルが出力される。

scripts/test.js

npm run testで呼び出されるscript。

実行すると以下のようなpromptが表示される。

Watch Usage
 › Press a to run all tests.
 › Press o to only run tests related to changed files.
 › Press p to filter by a filename regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.

• a: 全てのテストを実行
• o: 変更されたファイルのみテストを実行
• p: 正規表現でフィルタされたファイル名のテストのみを実行
• q: ウォッチモードを終了
• Enter: 最後に実行したテストを再実行(?)

一度実行するとwatch状態になるので終了したいときはqを押す。

scriptの中ではNODE_ENV='test'でjestを実行してるだけのよう。

全部読みきれてないけど、webpackやnodeの作法が学べるので良い勉強コンテンツだなと思った。