「react-scripts start」コマンドとは正確には何ですか？

私はを使用してReactプロジェクトで作業しておりcreate-react-app、プロジェクトを開始するには2つのオプションがあります。

最初の方法：

npm run start次のpackage.jsonような定義で：

"start": "react-scripts start",

2番目の方法：

そして npm start

これら2つのコマンドの違いは何ですか？そして、の目的は何react-scripts startですか？

定義を見つけようとしましたが、名前のパッケージを見つけましたが、このコマンドの意味がわかりません。

create-react-appおよびreact-scripts

react-scriptscreate-react-appスターターパックのスクリプトのセットです。create-react-appを使用すると、構成せずにプロジェクトを開始できます。そのため、自分でプロジェクトをセットアップする必要はありません。

react-scripts start開発環境をセットアップしてサーバーを起動し、ホットモジュールを再読み込みします。あなたはそれがあなたのために何をするかすべてを見るためにここを読むことができます。

で作成反応するアプリは、次のしているが、箱から出しています。

• React、JSX、ES6、およびFlow構文のサポート。
• オブジェクト拡散演算子のようなES6を超える言語の追加機能。
• 自動接頭辞付きのCSSなので、-webkit-や他の接頭辞は必要ありません。
• カバレッジレポートの組み込みサポートを備えた高速のインタラクティブな単体テストランナー。
• 一般的な間違いについて警告するライブ開発サーバー。
• JS、CSS、および本番用の画像を、ハッシュとソースマップとともにバンドルするビルドスクリプト。
• すべてのプログレッシブウェブアプリの基準を満たす、オフラインファーストのサービスワーカーとウェブアプリマニフェスト。
• 単一の依存関係を持つ上記のツールの手間のかからない更新。

npmスクリプト

npm startのショートカットですnpm run start。

npm runscriptspackage.jsonのオブジェクトで定義したスクリプトを実行するために使用されます

startスクリプトオブジェクトにキーがない場合、デフォルトでnode server.js

場合によっては、reactスクリプトが提供する以上のことを実行したい場合がありますreact-scripts eject。この場合は、実行できます。これにより、プロジェクトが「管理された」状態から管理されていない状態に変わり、依存関係、ビルドスクリプト、その他の構成を完全に制御できます。

Sagiv bgが指摘したように、このnpm startコマンドはのショートカットですnpm run start。もう少し明確にするために、実際の例を追加したかっただけです。

以下の設定はcreate-react-appgithubリポジトリからのものです。package.json実際のフローを定義するスクリプトの束を規定します。

"scripts": {
  "start": "npm-run-all -p watch-css start-js",
  "build": "npm run build-css && react-scripts build",
  "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
  "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
  "start-js": "react-scripts start"
},

わかりやすくするために、図を追加しました。

青いボックスはスクリプトへの参照であり、すべてnpm run <script-name>コマンドで直接実行できます。しかし、ご覧のとおり、実際には2つの実用的なフローしかありません。

• npm run start
• npm run build

灰色のボックスは、コマンドラインから実行できるコマンドです。

したがって、たとえば、実際にコマンドに変換するnpm start（またはnpm run start）をnpm-run-all -p watch-css start-js実行すると、コマンドラインから実行されます。

私の場合、この特別なnpm-run-allコマンドがあります。これは、「build：」で始まるスクリプトを検索し、それらすべてを実行する一般的なプラグインです。実際、そのパターンに一致するものはありません。ただし、ここでは、-p <command1> <command2>スイッチを使用して複数のコマンドを並行して実行することもできます。したがって、ここでは2つのスクリプト、つまりwatch-cssとを実行しstart-jsます。（最後に言及したスクリプトは、ファイルの変更を監視するウォッチャーであり、強制終了した場合にのみ終了します。）

• watch-cssことを確認する*.scssファイルがに変換され*.cssたファイル、および今後の更新を探します。

• 開発モードでWebサイトをホストするstart-jsへのポイントreact-scripts start。

結論として、npm startコマンドは構成可能です。それが何をするのか知りたい場合は、package.jsonファイルを確認する必要があります。（そして、物事が複雑になったときに小さな図を作成したいかもしれません）。

NPMにあなたがこのようなスクリプトを実行、スクリプトの名前である「スタート」npm run scriptName、npm start またの略です npm run start

「react-scripts」に関しては、これは特にcreate-react-appに関連するスクリプトです