npm スクリプトを実行、構成、およびトラブルシューティングする方法

npm スクリプトには、JavaScript プロジェクトでタスクを自動化するために使用できる端末コマンドのセットがバンドルされています。また、さまざまな環境でコマンドを実行する一貫した方法も提供します。

package.json ファイルで npm スクリプトをセットアップし、コマンド ラインで実行し、幅広いオプション セットを使用してその動作を構成できます。

package.json ファイルで npm スクリプトを設定する

通常、JavaScript プロジェクトのルートにある package.json ファイルで npm スクリプトを定義します。他のファイルからスクリプトを実行できるため、これは必須ではありませんが、package.json を使用すると、スクリプトへのアクセスと管理が容易になります。

先に進むには、開発環境に npm と Node がインストールされている必要があることに注意してください。ここにいくつかの役立つ記事があります:

• Windows に Node.js と npm をインストールする方法。
• Ubuntu に Node.js と npm をインストールする方法。

package.json で npm スクリプトを設定するには、次の手順に従います。

1. プロジェクトのルートに移動します。
2. ターミナルで npm init を実行します。このコマンドは、プロジェクトに関するいくつかの質問をします。それらに回答して、適切な package.json ファイルを作成します。 npm init

3. package.json ファイルで、スクリプト フィールドを見つけます。ここでは、スクリプトの名前と実行するコマンドをキーと値のペアとして追加できます。たとえば、次の hello-world という名前のスクリプトは、実行時にターミナルに「Hello world」と出力します。 {
    "scripts": {
        "hello-world": "echo \\"Hello world\\""
    }
}


以下に、JavaScript プロジェクトの一般的なスクリプトをいくつか示します。

• start : このスクリプトは、開発サーバーを起動します。たとえば、Node プロジェクトでは、nodemon を使用してサーバーを実行できます。
• build : アプリケーションの本番コードを生成し、webpack などのツールを使用してコードを縮小およびバンドルする場合があります。
• test : このスクリプトは、プロジェクトで定義されたテストを実行します。Jest のようなテスト フレームワークを実行できます。
• lint : lint スクリプトは、ESLint などの lint ツールを実行して、潜在的なエラーがないかコードをチェックします。
• watch : このスクリプトは、ソース コードの変更を監視し、コマンドを実行します。テストを再実行したり、コードの変更時にアプリケーションを再構築したりするのに役立ちます。
• deploy : プロダクションやステージングなどの指定された環境にアプリケーションをデプロイするコマンドを実行します。

前後のスクリプト

npm は、事前スクリプトと事後スクリプトをサポートしています。事前スクリプトは特定のスクリプトの前に実行され、事後スクリプトは後で実行されます。スクリプト名の前に「pre」または「post」を付けるだけで、任意のスクリプトの pre および post スクリプトを作成できます。

たとえば、以下は、それぞれテスト スクリプトの前後に実行されるプレテスト スクリプトとポストテスト スクリプトです。

{
    "scripts": {
        "pretest": "npm run lint",
        "test": "jest",
        "posttest": "npm run build"
    }
}


package.json から npm スクリプトを実行する

npm スクリプトを package.json に追加したら、npm run コマンドを使用して実行できます。

構文は次のとおりです。

npm run <script-name>


たとえば、前に定義した開始スクリプトを実行するには、次を使用します。

npm run start


npm run コマンドを単独で実行して、プロジェクトで使用可能なすべてのスクリプトのリストを取得できます。出力例を次に示します。

Scripts available in npm-scripts-demo@1.0.0 via `npm run-script`:
  hello-world
    echo "Hello world"


スクリプトの名前と実行するコマンドが一覧表示されます。

短縮コマンドを使用して組み込みスクリプトを実行する

npm は、短縮コマンドを使用して実行できるいくつかの組み込みスクリプトをサポートしています。たとえば、start という名前の npm スクリプトを実行するには、npm run start の代わりに npm start を使用できます。

これは、完全なコマンドを入力するよりも便利で迅速です。このように実行できるその他の組み込みスクリプトには、「test」、「stop」、「restart」などがあります。

複数の npm スクリプトの実行

次の 2 つの方法で、複数の npm スクリプトを実行できます。

• 順次
• 並行して

Linux やその他の Unix ライクなシステムを使用している場合は、複数のコマンドを一度に実行する標準的な方法を使用できます。

複数の npm スクリプトを順番に実行するには、&& を使用します。次に例を示します。

npm run start && npm test


複数の npm スクリプトを並行して実行するには、次のように & を使用します。

npm run server & npm run client


UNIX 以外の環境では、npm-run-all コマンドまたは同時に npm パッケージを使用できます。

npm-run-all の使用:

npm-run-all --parallel server client


package.json で同時に使用します。

"scripts": {
    "dev": "concurrently \\"npm run server\\"\\"npm run client\\"",
}


npm-run-all および Concurrently パッケージを使用する前にインストールする必要があることに注意してください。

一般的な Npm スクリプト エラーのトラブルシューティング

以下は、npm スクリプトの実行時に発生する可能性のある一般的なエラーの一部です。

• npmエラー！スクリプトがありません — このエラーは、実行しようとしているスクリプトを package.json ファイルで定義していない場合に発生します。スクリプト名のつづりが正しいこと、およびそれが package.json ファイルの scripts フィールドで定義されていることを確認してください。
• 権限が拒否されました— このエラーは、スクリプトを実行する権限がない場合に発生するため、適切な権限があることを確認してください。
• 依存関係がありません— このエラーは、スクリプトがインストールされていないパッケージを使用している場合に発生します。depcheckなどのツールを使用して、package.json にない依存関係を確認し、npm install を使用してそれらをインストールします。
• 不明なコマンド— このエラーは通常、組み込みの npm コマンドとしてカスタム スクリプトを実行すると発生します。カスタム スクリプトを実行するときは、必ずnpm runまたはnpm run-scriptを使用してください。

npm スクリプトでの環境変数の使用

環境変数を使用すると、ハードコーディングせずに情報を渡すことができます。npm スクリプトで環境変数を使用するには、cross-env npm packageを使用できます。このツールは、あらゆる環境で環境変数を設定するのに役立ちます。

端末で次のコマンドを実行して、開発依存関係としてインストールすることから始めます。

npm i save -D cross-env


次に、スクリプトで次のように使用します。

{
    "scripts": {
        "build": "cross-env NODE_ENV=production webpack"
    }
}


ここで、cross-env は NODE_ENV 変数を「production」に設定します。

コマンドライン引数をスクリプトに渡す

スクリプト名の後に 2 つのダッシュ「–」を使用して、npm スクリプトにコマンド ライン引数を渡すことができます。たとえば、次のコマンドは、watch 引数を指定してテスト スクリプトを実行します。

npm run test -- --watch


次のように、コマンド ライン引数を npm スクリプトに送信することもできます。

npm run my-port --PORT=3000


次に、次のようにスクリプトでアクセスします。

"scripts": {
    "my-port": "echo \\"Port: $npm_config_PORT\\""
}


Windows システムでは、これを使用します。

"scripts": {
    "my-port": "echo \\"Port: %npm_config_PORT%\\""
}


スクリプトを実行すると、「Port: 3000」と出力されるはずです。

npm スクリプトを使用する理由

スクリプトを package.json に追加してコマンド ラインで実行し、pre フックと post フックを使用して、ライン引数と環境変数をスクリプトに渡すことができます。

npm スクリプトは、JavaScript プロジェクトのタスクを自動化する強力な方法です。複数のタスクを実行するための一貫したコマンドを提供することで、ワークフローを改善し、時間を節約できます。