NPM初心者ガイド

Node Package Managerとは

開発の一般的なフレーズは“ホイールを再発明されていない”という意味で、ボックスの中に存在する機能を作成する時間を費やしていないDate() ? 私だけじゃない.右?)それは偉大な学習経験をすることができますが、生産コードを構築すると、それはしばしば巨人と他の人によって書かれたレバレッジのコードの肩に立つためにはるかに努力することができます.
長い物語の短い、ノードパッケージマネージャ(NPM)は、あなたがプロジェクトで使用することができます他の誰かによって書かれた“コードのパッケージ”をインストールする方法です.なぜ自分のコードをファイルにコピーしないのでしょうか?NPMを使用してコードをコピーするのにいくつかの利点があります.そのコードを実行するにはどのコードが依存しているのかを把握する必要はありませんし、NPMパッケージでセキュリティ問題がある場合は、パッケージを簡単に更新することができます.
そして、NPMの最高の部分?とNode ! それで、あなたがすでにノードを持っているならば、あなたはすでにNPMを持ちます!

NPMインストール

どのように、私はすでにNPMがインストールされるかどうかわかっていますか？

コマンドラインからNPMが既にインストールされているかどうかを確認できます.

npm --version

# Expected output to be something like
6.14.10
# If this number doesn't match up, that's OK! 

注:これは任意のディレクトリから実行することができます、ノードプロジェクトのフォルダにする必要はありません!

私はNPMをインストールしていない場合はどうですか？

走るならnpm --version 以下の行にエラーを返しました.

npm: The term 'npm' is not recognized as a name of a cmdlet, function, script file, or executable program. Check the spelling of the name, or if a path was included, verify that the path is correct and tray again.
# This is the powershell error format. CMD or bash might have slightly different error messages.

心配するなノード/npmをインストールできますNode.js homepage “LTS”(長期的なサポート)ビルドまたは“現在”ビルドを選択することによって、これは安定していない可能性がありますが、最新の機能セットを提供します.

パッケージをダウンロードしてインストールするとnpm --version 上に示したように、戻り値が表示されます.NPMのバージョンは、ダウンロードしたノードのバージョンと一致しません- NPMには別々のバージョンリリースがあります.あなたはまだ以前から開いている場合、あなたの端末を再起動する必要があります.

パッケージを入力します。JSON

NPMがインストールされているので、どのように動作し、どのように動作しているプロジェクトに影響を与えるかをもう少し掘ることができます.
ノードプロジェクトやフレームワークなどの作業Vue or React あなたは、パッケージに入ります.JSONファイル(あなたがCDN経由で反応/Vueをインポートしていない限り).パッケージ.JSONファイルはNPMのために使用され、パッケージ内のプロジェクトで使用するパッケージを理解することができますdependencies and devDependencies 部分

// These are the dependencies for my blog 
// at the time of writing
{
  //...
"dependencies": {
    "@fortawesome/free-regular-svg-icons": "^5.13.1",
    "@fortawesome/free-solid-svg-icons": "^5.13.1",
    "@gridsome/plugin-critical": "^0.1.6",
    "@gridsome/plugin-sitemap": "^0.4.0",
    "@gridsome/source-contentful": "^0.5.3",
    "@gridsome/source-filesystem": "^0.6.2",
    "@gridsome/transformer-remark": "^0.3.2",
    "@tailwindcss/typography": "^0.4.1",
    "autoprefixer": "^9",
    "dayjs": "^1.10.5",
    "gridsome": "^0.7.17",
    "gridsome-plugin-remark-prismjs-all": "^0.3.5",
    "postcss": "^7",
    "remark-footnotes": "2.0.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "webpack-bundle-analyzer": "^4.4.2"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.29",
    "@fortawesome/free-brands-svg-icons": "^5.13.1",
    "@fortawesome/vue-fontawesome": "^0.1.10",
    "@fullhuman/postcss-purgecss": "^2.3.0",
    "gridsome-plugin-remark-codetitle": "^0.2.2"
  }
}

NPMインストール

注意:npm install and npm i 交換可能です-彼らは両方同じことを行う!
特に、NPM依存リポジトリを最初にクローン化すると、プロジェクトを直ちに起動することができなくなります.あなたがする必要がある最初のことは実行されますnpm install , これはあなたのパッケージの依存関係を通して読みます.JSONファイルとパッケージをインストールします.これは時々実行するためにビットを取るので、それが実行するために永遠に撮影しているように感じる場合は心配しないでください.
インストールコマンドの実行が終了したら、ディレクトリにパッケージロックを見つけることができます.JSON

この「1321脆弱性」メッセージは何ですか？

時々走るときnpm install 最後には、最後に少し似たようなメッセージが表示されます.

found 1321 vulnerabilities (116 low, 246 moderate, 958 high, 1 critical) in 2040 scanned packages
  run `npm audit fix` to fix 1093 of them.
# Yes, this was for one of my actual repositories 😅

時npm install 実行、NPMも実行npm audit , 既知のセキュリティ脆弱性を修正するために更新されたパッケージのNPMレコードをチェックします.時々、これは修正するために手動の介入を含みます、しかし、時々、あなたが走るならば、NPMはあなたのためにそれを修正することができますnpm audit fix あなたのバージョン設定が何であるかに応じて(下記の上でより多くの).

この新しいパッケージロックは何ですか。JSONファイル?

パッケージロック.JSONはNPMによって自動生成されたファイルで、インストールされたNPMパッケージの正確なバージョンを概説します.これは次の状況を避けるために重要です.

NPMパッケージのバージョン1.0を使用してプロジェクトを開始します

githubにリポジトリをアップロードします

いくつかの時間後に、NPMのパッケージバージョン2.0

誰かがあなたのリポジトリをクローン化しようとする

彼らが走るときnpm install 彼らはバージョン2.0をインストールします、そして、倉庫は彼らがそれを実行しようとするとき、エラーを投げます.

パニクエナサス

パッケージロックに感謝します.ユーザーが走るときnpm install , それはあなたがプロジェクトを開発したときに使用したパッケージの同じバージョンをインストールします!いいえパニーク!

プロジェクトへのパッケージの追加

プロジェクトで使用するNPMパッケージのドキュメントでは、通常、パッケージのインストール方法についての行を参照してください.インストールは次のパターンに従います.

npm install packageName

どこpackageName インストールするNPMパッケージの名前に置き換えられます.チェインパッケージも同時にインストールできます.

npm install package1 package2 package3

上記のコマンドは"package 1 ", "package 2 "および"package 3 "をインストールします.
あなたがパッケージを加えるときはいつでもnpm install すべてのパッケージがインストールされていることを保証するためにも動作します.

バージョンの指定

特に、パッケージ内のバージョンを指定する方法は異なります.JSON私が見た最も一般的な例のいくつか

{
  //...
  "dependencies": {
    "specific": "1.0.3",
    "tilde": "~1.2.0",
    "caret": "^1.0.0"
  }
  //...
}

特定のバージョン1.0.3をインストールします

Tildeはマイナーバージョンに任意のパッチをインストールします.言い換えると、3番目の10進数は変わることができます、しかし、1.3.0はインストールされません.

キャレットはマイナーな変更とパッチをインストールします.言い換えると、2番目と3番目の10進数は変わることができます、しかし、2.0.0はインストールされません.

これらはすべて別の状況に便利です-しかし、それは別の日のためのポストです!

私がノードモジュールをインストールしたなら、なぜ私のプロジェクトを使用する次の人はNPMのインストールを実行する必要がありますか？

私が走ったと言ったビットを思い出してくださいnpm install 実行するためにしばらくかかることができますか?パッケージがダウンロードされ、リポジトリにインストールされているためです.ノードモジュールを使用する場合は、以下のような一般的な処理が行われます.プロジェクトのルートでgitignoreファイル:

node_modules

これは、あなたのプロジェクトをアップロードするあなたのNodeRoundモジュールを防ぐために、あなたのリポジトリをプッシュするたびに時間を節約(そしてあなたのGitツリーを控えめに保つ).

依存対vs

このセクションは大部分は好奇心旺盛なもので、NPMパッケージを公開しようとしている人たちのためです.この節を飛ばしても大丈夫です.👍
プロジェクトに取り組んでいる場合、テストフレームワークを含めるのが一般的ですJest , しかし、テストが開発者側で起こるので、あなたは必ずしもJestをインストールするために将来あなたのパッケージを使用する誰でも作りたくありません.パッケージが通常のインストールコマンドの代わりにローカル開発に必要な場合はnpm install --save-dev packageName , これはパッケージを"devDependencies" オブジェクトは、彼らが本当に必要としないパッケージをインストールするのを待ってからあなたのユーザーを保存します.
あなたがdevdependenciesを持っている倉庫に取り組んでいる誰かがまだあなたのパッケージに取り組んでいるので、関連のパッケージをインストールするということに注意してください.このため、VueやResponseのような何かでプロジェクトを構築することは、依存関係とdev依存性の違いを見ることができません.

NPMグローバルインストール

NPMパッケージで動作する場合は、--global フラグを指定します.代わりに、このフラグは、パッケージをコマンドラインから後で実行できるようにパッケージをインストールします.
例えば、あなたがインストールしようとしているならVue CLI (Command line interface) 次のコマンドを実行します.

npm install --global @vue/cli

これは

# Create a new Vue Project:
vue create project

# And

# Adding plugins to vue projects (in this case ES Lint):
vue add eslint

拡張機能では、グローバル機能も、独自のコマンドラインインターフェイスプロンプトを作成し、ツールを端末から物事を行うことができます!

なぜNPMのインストール命令も糸を参照しますか？

ちょうどクイックメモについてyarn add コマンドYarn NPMの上に構築され、わずかに変更コマンドを介して同じ機能を提供しています.例えば、

# Instead of npm install package
yarn add package

# Instead of npm install
yarn