導入
npm run dev コマンドは私たちの仕事で最も一般的に使用されるコマンドであるはずですが、多くの友人はその実行方法を深く理解していないと思います。以下では、npm run dev の基礎的な操作を浅いところから説明します。より深い。
理解する
npm が dev を実行すると、まずプロジェクトの package.json ファイルに移動して、スクリプト内の対応する dev を見つけてから、dev コマンドを実行します。
たとえば、vue プロジェクト npm runserve を開始すると、実際にはコマンド vue-cli-serviceserve が実行されます。
package.json ファイル
{
"name": "h5",
"version": "1.0.7",
"private": true,
"scripts": {
"dev": "vue-cli-service serve"
},
}
魂の最初の質問
そうすると、友人の中には、なぜ直接vue-cli-service serve命令を実行しないのかと尋ねる人もいるかもしれません。
回答:この命令はオペレーティング システムに存在しないため、直接実行するとvue-cli-service serveエラーが報告されます。vue-cli-service
魂の第二の質問
そこで友人の中には、vue-cli-service serveこの命令はオペレーティング システムに存在しないのに、なぜnpm run devそれが実行されると実行と同じになるのかvue-cli-service serve、なぜ命令が存在しないというエラーを報告せずに成功できるのか、と再度尋ねるかもしれません。
答え：
- 依存関係をインストールするときは、npm install を通じて実行します。npm が依存関係をインストールすると、ディレクトリに名前付きの実行可能ファイルがいくつか
node_modules/.bin/作成されます。vue-cli-service .binこのディレクトリは npm パッケージではありません。ディレクトリ内のファイルはソフト リンクを表しており、ファイルを開くと、ファイルの先頭に#!/bin/shこれがスクリプトであることを示す文字が表示されます。npm run devしたがって、 executeを使用するとvue-cli-service serve、グローバル コマンドがインストールされていないにもかかわらずvue-cli-service、npm はファイルを見つけてスクリプトとして実行します。これは、execution と同等./node_modules/.binです。vue-cli-service./node_modules/.bin/vue-cli-service serve
魂の第三の問い
その場合、.binディレクトリ内のファイルはソフト リンクを表すため、bin ディレクトリ内のソフト リンク ファイルはどこから来たのですか? このソフト接続がどこで実行されるかをどのようにして知るのでしょうか?
答え：
- bin ディレクトリ内のこれらのソフト リンクは、プロジェクトの最も外側のpackage-lock.jsonファイルに存在します。
npm installpackage-lock.json から、新しい vue プロジェクト全体を作成するときに、npm が bin/vue-cli-service.js を bin として宣言していることがわかります。- そのため
npm install、その時点で、npm は設定を読み取った後、ファイルを ./node_modules/.bin ディレクトリにソフトリンクし、npm は自動的に node_modules/.bin を $PATH に追加するため、依存プログラムを直接実行できるようになります。コマンド また、依存プログラムを開発するため、それらをグローバルにインストールする必要はありません。 - つまり、npm install するとき、npm はこのソフト リンクの構成に役立ちます。実際、このソフト リンクはマッピングに相当します。npm run dev が実行されると、対応するソフト リンクが node_modules/bin に見つかります。マッピング ファイルをクリックし、対応する js ファイルを見つけて実行します。
この時点で、3 つの魂の質問を経て、npm run dev の基礎となる操作についてはすでにある程度理解できたと思います。
結論
この記事は筆者の個人的な勉強メモですので、誤りがあればご指摘ください。この記事が役に立った場合は、フォローといいねをお願いします〜 あなたのサポートが著者が更新を続ける動機です。