目次
章をガイドします
簡単な例
パッケージをインストールするとどうなりますか
package.jsonとpackage-lock.json
node_modules
依存関係をインストールするときは注意が必要です
NPM監査とは何ですか?
次のステップ
ホームページ ウェブフロントエンド CSSチュートリアル NPMパッケージをインストールする方法

NPMパッケージをインストールする方法

Mar 15, 2025 am 09:57 AM

NPMパッケージをインストールする方法

NPMの詳細をご覧ください!前の章では、ノードとパッケージマネージャーを学び、NodeとNPMをインストールし、ノードバージョンマネージャー(NVM)に精通しました。このNPM初心者のガイドの次の部分では、NPMパッケージのインストールについて、あなたが最も関心のあるものを紹介します。

章をガイドします

  1. このガイドは誰ですか?
  2. 「NPM」とはどういう意味ですか?
  3. コマンドラインとは何ですか?
  4. ノードとは何ですか?
  5. パッケージマネージャーとは何ですか?
  6. NPMをインストールする方法は?
  7. NPMパッケージをインストールする方法は? (あなたの現在の場所!)
  8. NPMコマンドとは何ですか?
  9. 既存のNPMプロジェクトをインストールする方法は?

簡単な例

npm installコマンド(またはnpm iとして省略)とパッケージ名を使用して最初のパッケージをインストールして、プロジェクトに追加できます。たとえば、SASS 'ノードパッケージは単に「SASS」と呼ばれます。つまり、このようなプロジェクトに追加できます(最初にこの小さなプロジェクト用に作成された新しいフォルダーにあることを確認してください):

 NPMインストールSASS
ログイン後にコピー

それでおしまい!このコマンドを入力した後、NPMはすぐに動作を開始します。

舞台裏で起こることは、NPMがNPMパッケージレジストリでSASSという名前のパッケージを探しようとしていることです。パッケージが見つかった場合(そうです)NPMは、プロジェクトの自動生成されたnode_modulesフォルダー(後で詳細)(プロジェクトルートフォルダーにあります)にインストールします。 (そのため、NPMが16個のパッケージを追加し、SASSパッケージ自体の代わりに合計17 npmのパッケージを確認するのを確認します。依存関係もあります!)

インストールコマンドを実行した後、プロジェクトフォルダーに「sass」と呼ばれるものが表示されないことに気付くかもしれません。ただし、奇妙なことに、プロジェクトフォルダーには、 package.jsonpackage-lock.jsonという名前の2つのJSONファイルと、新しいnode_modulesフォルダーの3つの新しいプロジェクトが表示されます。

これらは何ですか?このすべてではなく、SASSをインストールするにはNPMが必要です。これはSASSの一部ではありません…そうですか?はい、これは正しいですが、これらの新しいプロジェクトがプロジェクトフォルダーで生成される理由については良い説明があります。何が起こったのか見てみましょう。

パッケージをインストールするとどうなりますか

パッケージをインストール(またはアンインストールまたは更新)する場合、NPMは次の4つのことのほとんどまたはすべてを行います。

  1. 必要に応じて、プロジェクトのpackage.jsonファイルを更新します。
  2. すべての技術的な詳細を備えたpackage-lock.jsonファイル(「ロックファイル」と呼ばれる)を更新します。
  3. 実際のパッケージファイルと、元のパッケージが依存する可能性のあるパッケージをインストールします( node_modulesフォルダー)
  4. インストールされたパッケージの監査を実行します。

1つずつ紹介しましょう。

package.jsonとpackage-lock.json

これらの2つのJSONファイルは、プロジェクト内のすべての依存関係の正確なログ(およびそのすべての依存関係、すべての依存関係など)を確保するために連携します。 2つの違いは少し技術的ですが、簡単に言えば、ロックファイルはプロジェクトの依存関係package.jsonの詳細で正確なスナップショットです。インストールしたメインパッケージはpackage.jsonにリストされる場合がありますが、 package-lock.json依存関係ツリー全体を追跡する場所です。

ロックファイルも手動で更新しないでください。したがって、ロックファイルをpackage.jsonファイルと混同しないようにしてください。

プロジェクトで他の人と共有または協力すると、NPMはプロジェクトのソースと、これら2つのファイルを通じてプロジェクトにインストールされているものを知っています。この情報のおかげで、他の人のマシンに環境を正確にコピーできます。両方のファイルをGITリポジトリに提出し、プロジェクトの依存関係の青写真として機能する必要があります。これにより、チームの別の開発者がリポジトリを作成し、 npm installコマンドを実行すると、NPMはインストールするパッケージを正確に把握し、同僚を同期させます。

package.jsonを開くと、あまり見られませんが、何が起こっているのか見てみる価値があります。

 {
  「依存関係」:{
    「sass」: "^1.43.4"
  }
}
ログイン後にコピー

正確なバージョン番号は表示されない場合があります(この記事が書かれてからパッケージが更新されているため)が、JSON dependenciesオブジェクト内にSASSが表示されるはずです。数字自体(この場合は1.43.4)は、インストールされているSASSの特定のバージョンを示します。

短いが重要なサイドノート:バージョン番号の先頭にあるオフキャラクター(^)により、NPMはパッケージにマイナーアップデートをインストールできます。言い換えれば、インストールされているSASSパッケージは少なくともバージョン1.43.4でなければならないが、2.0.0未満である限り、より高いバージョン1.xxであることができることをNPMに伝えています。 NPMは通常、パッケージをインストールするときに最新の安定したバージョンを選択しますが、これは非破壊的な更新を可能にするために追加されます。この部分は「セマンティックバージョン」と呼ばれます。これはそれ自体がブログ投稿のトピックですが、NPMに固有のものではありません。

とにかく、これらはこれら2つのJSONファイルです。次に、 node_modulesフォルダーについて説明します。

node_modules

node_modulesすべての実際のパッケージコードが配置されている場所です。指示に従ってフォルダーを開くと、SASSフォルダーがありますが、他にもいくつかのフォルダーがあります。

他のフォルダーの理由は、パッケージがインストールされている場合、適切に機能するには他のパッケージが必要になる可能性があるためです(SASSが明らかに必要です)。したがって、NPMは、これらすべての依存関係を見つけてインストールする作業を自動的に完了します。ご想像のとおり、これらの依存関係は独自の他の依存関係を持つ可能性があるため、プロセスが繰り返されます。依存性ツリーを最も遠いブランチにクロールし、必要なものはすべてインストールされます(または、ある種のエラーが発生するまで)。

したがって、プロジェクトには通常、ディスクスペースの観点から急速に蓄積する数百またはさらに多くのnode_modulesサブフォルダーがあります。 node_modules通常非常に大きくなります。

node_modulesなどの大きなフォルダーをプロジェクトのリポジトリに送信する方法を知りたい場合は、JSONファイルとは異なり、 node_modulesフォルダーはGITにコミットしてはならず、共有されるべきではないことに注意してください。実際、ほぼすべての.gitignoreファイル(ファイルをトレースするときにスキップするものをgitに伝えるファイル)の例には、 node_modulesが含まれているため、gitが触れたり追跡したりしないようにします。

それでは、あなたのチームの他の人はどのようにしてこれらのパッケージを手に入れますか?コマンドラインからnpm install (またはnpm iとして省略)を実行して、ソースから直接依存関係をダウンロードします。このようにして、元のリポジトリから大量のデータをコミットしたり抽出したりする必要はありません。

依存関係をインストールするときは注意が必要です

依存関係のこの巨大なネットワークとその遠い相対依存関係は、この状況を引き起こす可能性があります。他の多くのパッケージで有用なサービスを提供するいくつかの有用なサービスライブラリが採用される場合があります。これは、サイトとアプリケーションの大部分に元のコードが最終的に静かにインストールされるまで、他の多くのパッケージで使用されます。

パッケージのインストール中に実際に他の多くのものを入れることができます。新しい友人を家族のパーティーに招待するように感じ、友人は20人の招待されていないゲストと一緒に現れます。しかし、これは次の理由でそれほど奇妙でも恐ろしいことではないように思えます。

  1. ほとんどのNPMパッケージはオープンソースです。あなたと他の誰でも、内部がどのように機能するかを簡単に見ることができ、パッケージが何をしているのかを正確に知ることができます。また、レジストリ(npmjs.com)でパッケージを表示して、最後に更新されたときにインストールされた回数、その他の関連情報を確認することもできます。パッケージが非常に人気がある場合は、安全であることを合理的に確認できます。
  2. 多くのプロジェクトに必要な機能の巨大な世界があります。たとえば、日付のフォーマット、HTTPリクエストと応答の処理、スロットリング、アンチシェイク、またはアニメーションを検討します。ホイールを再発明し、新しいプロジェクトで使用するたびに手動でエンコードすることは意味がありません。
  3. パッケージのインストールは、携帯電話にアプリをインストールしたり、WordPress Webサイトにプラグインをインストールすることと違いはありません。違いは、パッケージやこれらのアプリケーションとプラグインが依存する可能性のある他のものを処理するため、これらのアプリケーションとプラグインが内部でどのように機能するかをより深く理解する能力がないことです。何らかの方法で多くの小さなパッケージを導入する可能性はあります。

もちろん、任意のコードをインストールして実行できる環境では、注意することをお勧めします。誤解しないでください。悪者がこのシステムを決して悪用しなかったと言ったら嘘をつくでしょう。しかし、物事がうまくいかないのを防ぐことができる多くのプロセスがあることを知ってください。疑わしい場合は、最も人気のあるバッグに固執してください。

また、NPMがあなたのために自動セキュリティ監査を実行することに注意してください。これにより、このセクションの最後のポイントに到達します。

NPM監査とは何ですか?

以前にSASSをインストールしたとき、端末が終了したときに次のメッセージが表示されました。

 <code>found 0 vulnerabilities</code>
ログイン後にコピー

ただし、以下の私の古いプロジェクトのように、いくつかの警告が表示される場合があります。少なくとも数年間アイドル状態になった後、 npm installnpm i )を開始して実行することにしました。それがどのように機能するか見てみましょう:

NPM監査は、既知の脆弱性を持つパッケージを示し、パッケージをインストールすると監査が自動的に実行されます。このようなニュースを見ても、多くの脆弱性、特に「中」カテゴリの脆弱性は非常低いリスクをもたらし、非常に特定の状況にのみ関係している可能性があります。 (たとえば、特定の方法で使用すると、パッケージに1つのメソッドのみが脆弱になる可能性があります。)

それにもかかわらず、私たちが解決できる問題を解決する方が良いです。これは、 npm audit fixコマンドが行うことです。最後にfixを追加すると、NPMに既知の脆弱性を備えたパッケージの新しいマイナーバージョンを継続して更新するように指示されます。 「マイナーバージョン」セクションは重要です。これは、プロジェクトを破るリスクなしに、この方法で更新を安全に実行する必要があることを意味します。

マイナーバージョン番号でパッケージのバージョン番号を上げても機能しない場合は、元のコマンドに--forceフラグを追加できます。

 NPM監査修正 - フォース
ログイン後にコピー

ただし、これは危険な操作です。 NPMの「使用力」許可を付与すると、脆弱性を解決するためにメジャーバージョンの更新をインストールできるようになりました。つまり、重要な変更を加えたり、互換性を導入したりする可能性があります。 npm audit fix解決できない重要な脆弱性がない限り、これをお勧めしません。

このトピックに関する最後のメモ: node_modulesを削除し、 npm installを再実行することにより、NPMプロジェクトで予期しない問題を修正できる場合があります。これはnpmの「繰り返しのスイッチ」方法であり、私はそれを何度もやりました。

次のステップ

NPMの背後にあるウサギの穴を徹底的に探索したので、実際の操作に戻りましょう。

←第6章第8章→

以上がNPMパッケージをインストールする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード 粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード Apr 03, 2025 am 10:30 AM

先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。

Googleフォント変数フォント Googleフォント変数フォント Apr 09, 2025 am 10:42 AM

Google Fontsが新しいデザイン(ツイート)を展開したようです。最後の大きな再設計と比較して、これははるかに反復的です。違いをほとんど伝えることができません

HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 Apr 11, 2025 am 11:29 AM

プロジェクトにカウントダウンタイマーが必要だったことはありますか?そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

HTMLデータ属性ガイド HTMLデータ属性ガイド Apr 11, 2025 am 11:50 AM

HTML、CSS、およびJavaScriptのデータ属性について知りたいと思っていたことはすべて。

フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? Apr 05, 2025 pm 05:51 PM

フレックスレイアウトの紫色のスラッシュ領域に関する質問フレックスレイアウトを使用すると、開発者ツールなどの混乱する現象に遭遇する可能性があります(D ...

CSSを介してファーストクラスの名前アイテムを使用して子要素を選択する方法は? CSSを介してファーストクラスの名前アイテムを使用して子要素を選択する方法は? Apr 05, 2025 pm 11:24 PM

要素の数が固定されていない場合、CSSを介して指定されたクラス名の最初の子要素を選択する方法。 HTML構造を処理するとき、あなたはしばしば異なる要素に遭遇します...

SASSをより速くするための概念の証明 SASSをより速くするための概念の証明 Apr 16, 2025 am 10:38 AM

新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。

See all articles