web-dev-qa-db-ja.com

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

私はreact-create-appを使ってReactプロジェクトで働いてきました、そして私はプロジェクトを始めるための2つのオプションがあります：

最初の方法：

npm run startのpackage.jsonの定義は次のようになります。

"start": "react-scripts start",

第二の方法：

とnpm start

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

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

reactjsnpm
63
Felipe Augusto

create-react-appおよびreact-scripts

react-scriptsは create-react-app starter packの一連のスクリプトです。 create-react-appを使用すると、設定しなくてもプロジェクトを開始できます。そのため、自分でプロジェクトを設定する必要はありません。

react-scripts startは開発環境を設定し、サーバーを起動し、さらにホットモジュールをリロードします。 ここ を読んで、あなたにとって何ができるのかを知ることができます。

create-react-app を使うと、箱から出して次の機能を利用できます。

  • React、JSX、ES6、およびFlowの構文サポート。
  • オブジェクト拡散演算子のようにES6を超えた言語エクストラ。
  • 自動プレフィックスCSSなので、-webkit-や他のプレフィックスは必要ありません。
  • カバレッジレポートのサポートを内蔵した高速対話型単体テストランナー。
  • よくある間違いについて警告するライブ開発サーバー。
  • ハッシュ、ソースマップを使って、制作用にJS、CSS、および画像をバンドルするためのビルドスクリプト。
  • すべてのプログレッシブWebアプリの基準を満たす、オフライン優先のサービスワーカーとWebアプリのマニフェスト。
  • 単一の依存関係を持つ上記のツールの手間のかからないアップデート。

npmスクリプト

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

npm run は、package.jsonのscriptsオブジェクトに定義したスクリプトを実行するために使用されます。

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

反応的なスクリプトがあなたに与える以上のことをしたいことがあります、この場合あなたはreact-scripts ejectをすることができます。これにより、プロジェクトは「管理」状態から非管理状態に変わります。ここでは、依存関係を完全に制御でき、スクリプトやその他の構成を構築できます。

54
Luke

サジフとしてb.g.指摘したように、npm startコマンドはnpm run startのショートカットです。もう少し明確にするために、 実際の例 を追加したいだけです。

以下の設定はcreate-react-app githubリポジトリからのものです。 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"
},

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

青いボックスはスクリプトへの参照であり、それらはすべて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スイッチの後には、他にも2つのパラメータがあります。 つまり、ここではこれら2つのスクリプトを実行するための省略形として機能します。 （watch-cssとstart-js）

  • watch-cssは、*.scssファイルが*.cssfilesに変換されていることを確認し、将来の更新を探します。

  • start-jsは、開発モードでWebサイトをホストするreact-scripts startを指します。

結論として、npm startコマンドは構成可能です。何をするのか知りたいのなら、package.jsonファイルをチェックしなければなりません。 （そして、状況が複雑になったときには小さな図を作りたいと思うかもしれません）。

14
bvdb

"start"はスクリプトの名前です。npmでは、次のようにスクリプトを実行します。npm run scriptName、npm startは、npm run startの略です。

"react-scripts"に関しては、これは create-react-app に特に関連したスクリプトです。

3
Sagiv b.g