【React】コマンドいろいろ（npm、npx）

Reactで開発するにあたって使用する、知っているとよいコマンドをまとめました。

npm start などあまりにもよく使用する、知っていて当たり前のコマンドは記載していません。

目次
  1. npm関係
  2. プロジェクトで使用するコマンドの定義
  3. npxとは

npm関係

npmの最新verへのアップデート

$ npm install -g npm

プロジェクトの初期化

$ npm init -y

-yオプションを付けることで、npm init実行時の質問をスキップしてくれる。

これで、package.jsonが生成される。

依存パッケージ（dependencies）の設定

“テスト”や、”ビルドを実行するためのツール”といった、開発環境のみで使用するパッケージをインストールする場合は、–save-devオプションを付けます。

jestをインストールする場合の例

$ npm install --save-dev jest

省略形では以下のように記述することもできます
$ npm i -D jest

この場合、依存パッケージはdependenciesでなく、devDependenciesとなります。

依存パッケージが最新かのチェック

$ npm outdated

最新バージョンへのアップデート

$ npm update

package-lock.jsonとは？

npm installを実行すると生成されるpackage-lock.jsonとは何か。

ここには、プロジェクトフォルダのnode_modules配下にインストールされた依存パッケージが全て列挙されています。

package.jsonで指定された依存パッケージだけでなく、依存パッケージの依存パッケージも含まれています。

プロジェクトで使用するコマンドの定義

使用コマンドはpackage.jsonファイルのscripts部に記述することで定義することができます。

デフォルトでは以下が記述されています。

{
　　省略
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
　　省略
}

ここに記述したコマンドは、「npm run コマンド名」で実行することができます。

例えば、以下の例

{
  "scripts": {
    "test": "jest"
  }
}

npm run testを実行すると、jestが実行されます。

このjest部には、シェルで実行可能なコマンド（lsやcd、mkdirなど）か、node_modulesディレクトリ配下にインストールされているCLIを指定することができる。

ちなみにcreate-react-appで作成したプロジェクトのデフォルト設定は以下のようになっています。

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

いくつかのコマンド（startやtest、restartなど）はrunの部分を省略して実行することができます。

いつもアプリをブラウザで起動するときに叩いているコマンド「npm start」もここに設定されている且つ、省略可能なコマンドだから立ち上がっているんですね！

npxとは

最後にnpmによく似たnpxとは何かについてです。

何ができるのか

npxを使うことで、scriptsにコマンドを記述しなくても、ローカルにインストールされたCLIを直接実行することができます。

なぜnpxでなくnpmを使うのか

npxを使えばscriptsに記述する必要がないのであれば、npmを使う必要がないと思ってしまいますね。

scriptsに記述してnpmで実行する意味は、ドキュメントの役割を果たすためです。

create-react-appをnpxで実行するのは、当然、package.jsonが存在していないので、scriptsへの定義もできていないためです。

そのため、CLIをリモートからダウンロードしてcreate-react-appが実行されています。

どう使い分けるか

npx・・・一度しか使わない、ローカルにインストールしたくないコマンド

npm・・・二度以上使う。ドキュメントとして残したい。

以上、お読みいただきありがとうございました。

コメント