web-dev-qa-db-ja.com

create-react-appの「npm run build」とは何ですか？

「npm run build」の作業に関する説明が見つかりませんでした。

それはシンプルで使いやすいですし、私は素晴らしい動作する「ビルド」フォルダを取得します、

しかし、create-react-appでは、舞台裏で何が起こるのでしょうか？

それはビルドツールの完全に異なる使用ですか？

そうでない場合、他のビルドツールを利用していますか？

javascriptnode.jsreactjsnpmcreate-react-app
14
Ben Porat

開発者は、JavaScriptとCSSを別々のファイルに分割することがよくあります。個別のファイルを使用すると、1つのことを行うよりモジュール化されたコードチャンクの記述に集中できます。ファイルの保守は非常に面倒な作業であるため、1つのことを行うファイルは認知的な負荷を軽減します。

舞台裏で何が起きているのでしょうか？

アプリを運用環境に移行するとき、複数のJavaScriptファイルまたはCSSファイルを用意することは理想的ではありません。ユーザーがサイトにアクセスすると、各ファイルに追加のHTTPリクエストが必要になり、サイトの読み込みが遅くなります。この問題を解決するには、アプリの“ build”を作成します。これにより、すべてのCSSファイルが1つのファイルにマージされ、JavaScriptでも同じことが行われます。これにより、ユーザーが取得するファイルの数とサイズを最小限に抑えることができます。これを作成するには、“ build”を使用します。“ build tool”を使用します。したがって、npm run buildを使用します。

既に述べたように、コマンド（npm run build）を実行するとbuildディレクトリが作成されます。ここで、アプリに多数のCSSファイルとJSファイルがあるとします。

css/
  mpp.css
  design.css
  visuals.css
  ...
js/
  service.js
  validator.js
  container.js
  ...

npm run buildを実行すると、buildディレクトリは次のようになります。

build/
  static/
    css/
      main.css
    js/
      main.js

これで、アプリのファイルは非常に少なくなりました。アプリはまだ同じですが、buildという小さなパッケージに圧縮されました。

最終判定：ビルドがユーザーに数ミリ秒のロード時間を節約するだけなら、なぜビルドに価値があるのか​​疑問に思うかもしれません。まあ、あなたが自分自身または他の少数の人々のためだけにサイトを作っているなら、あなたはこれを気にする必要はありません。プロジェクトのビルドを生成する必要があるのは、トラフィックの多いサイト（または近いうちにトラフィックが増えることを期待しているサイト）のみです。

開発を学習しているだけの場合、またはトラフィックが非常に少ないサイトを作成しているだけの場合、ビルドを生成するのは時間の無駄になるかもしれません。

16
patrick.1729

ここで簡単に説明します： https://github.com/facebookincubator/create-react-app#npm-run-build-or-yarn-build 。

プロダクションモードでReact=を正しくバンドルし、最高のパフォーマンスを得るためにビルドを最適化します。

ビルドは縮小され、ファイル名にはハッシュが含まれます。

舞台裏では、 babelを使用してコードとwebpackをビルドツールとして変換します を使用して、アプリケーションをバンドルします。

2
rgommezz