NPMパッケージをインストールする方法
NPMの詳細をご覧ください!前の章では、ノードとパッケージマネージャーを学び、NodeとNPMをインストールし、ノードバージョンマネージャー(NVM)に精通しました。このNPM初心者のガイドの次の部分では、NPMパッケージのインストールについて、あなたが最も関心のあるものを紹介します。
章をガイドします
- このガイドは誰ですか?
- 「NPM」とはどういう意味ですか?
- コマンドラインとは何ですか?
- ノードとは何ですか?
- パッケージマネージャーとは何ですか?
- NPMをインストールする方法は?
- NPMパッケージをインストールする方法は? (あなたの現在の場所!)
- NPMコマンドとは何ですか?
- 既存のNPMプロジェクトをインストールする方法は?
簡単な例
npm install
コマンド(またはnpm i
として省略)とパッケージ名を使用して最初のパッケージをインストールして、プロジェクトに追加できます。たとえば、SASS 'ノードパッケージは単に「SASS」と呼ばれます。つまり、このようなプロジェクトに追加できます(最初にこの小さなプロジェクト用に作成された新しいフォルダーにあることを確認してください):
NPMインストールSASS
それでおしまい!このコマンドを入力した後、NPMはすぐに動作を開始します。
舞台裏で起こることは、NPMがNPMパッケージレジストリでSASSという名前のパッケージを探しようとしていることです。パッケージが見つかった場合(そうです)NPMは、プロジェクトの自動生成されたnode_modules
フォルダー(後で詳細)(プロジェクトルートフォルダーにあります)にインストールします。 (そのため、NPMが16個のパッケージを追加し、SASSパッケージ自体の代わりに合計17 npmのパッケージを確認するのを確認します。依存関係もあります!)
インストールコマンドを実行した後、プロジェクトフォルダーに「sass」と呼ばれるものが表示されないことに気付くかもしれません。ただし、奇妙なことに、プロジェクトフォルダーには、 package.json
とpackage-lock.json
という名前の2つのJSONファイルと、新しいnode_modules
フォルダーの3つの新しいプロジェクトが表示されます。
これらは何ですか?このすべてではなく、SASSをインストールするにはNPMが必要です。これはSASSの一部ではありません…そうですか?はい、これは正しいですが、これらの新しいプロジェクトがプロジェクトフォルダーで生成される理由については良い説明があります。何が起こったのか見てみましょう。
パッケージをインストールするとどうなりますか
パッケージをインストール(またはアンインストールまたは更新)する場合、NPMは次の4つのことのほとんどまたはすべてを行います。
- 必要に応じて、プロジェクトの
package.json
ファイルを更新します。 - すべての技術的な詳細を備えた
package-lock.json
ファイル(「ロックファイル」と呼ばれる)を更新します。 - 実際のパッケージファイルと、元のパッケージが依存する可能性のあるパッケージをインストールします(
node_modules
フォルダー) - インストールされたパッケージの監査を実行します。
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人の招待されていないゲストと一緒に現れます。しかし、これは次の理由でそれほど奇妙でも恐ろしいことではないように思えます。
- ほとんどのNPMパッケージはオープンソースです。あなたと他の誰でも、内部がどのように機能するかを簡単に見ることができ、パッケージが何をしているのかを正確に知ることができます。また、レジストリ(npmjs.com)でパッケージを表示して、最後に更新されたときにインストールされた回数、その他の関連情報を確認することもできます。パッケージが非常に人気がある場合は、安全であることを合理的に確認できます。
- 多くのプロジェクトに必要な機能の巨大な世界があります。たとえば、日付のフォーマット、HTTPリクエストと応答の処理、スロットリング、アンチシェイク、またはアニメーションを検討します。ホイールを再発明し、新しいプロジェクトで使用するたびに手動でエンコードすることは意味がありません。
- パッケージのインストールは、携帯電話にアプリをインストールしたり、WordPress Webサイトにプラグインをインストールすることと違いはありません。違いは、パッケージやこれらのアプリケーションとプラグインが依存する可能性のある他のものを処理するため、これらのアプリケーションとプラグインが内部でどのように機能するかをより深く理解する能力がないことです。何らかの方法で多くの小さなパッケージを導入する可能性はあります。
もちろん、任意のコードをインストールして実行できる環境では、注意することをお勧めします。誤解しないでください。悪者がこのシステムを決して悪用しなかったと言ったら嘘をつくでしょう。しかし、物事がうまくいかないのを防ぐことができる多くのプロセスがあることを知ってください。疑わしい場合は、最も人気のあるバッグに固執してください。
また、NPMがあなたのために自動セキュリティ監査を実行することに注意してください。これにより、このセクションの最後のポイントに到達します。
NPM監査とは何ですか?
以前にSASSをインストールしたとき、端末が終了したときに次のメッセージが表示されました。
<code>found 0 vulnerabilities</code>
ただし、以下の私の古いプロジェクトのように、いくつかの警告が表示される場合があります。少なくとも数年間アイドル状態になった後、 npm install
( npm 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 サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











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

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

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

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

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

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

フロントエンド開発でWindowsのような実装方法...
