Back to Question Center
0

npmの初心者向けガイド - ノードパッケージマネージャ            npmの初心者向けガイド - ノードパッケージマネージャー関連トピック: ReactjQueryTools& & & 図書館アングル

1 answers:
npmの初心者向けガイド - ノードパッケージマネージャー

ノード。 jsを使用すると、アプリケーションをJavaScriptでサーバーに書き込むことができます。これはV8のJavaScriptランタイムに基づいて作成され、C ++で書かれているので、高速です。もともとは、アプリケーション用のサーバー環境として意図されていましたが、開発者はこれを使用して、ローカルのタスク自動化に役立つツールを作成し始めました。それ以来、ノードベースのツール(Grunt、Gulp、Webpackなど)のまったく新しいエコシステムが進化し、フロントエンド開発の顔を変えてきました。

この人気のある記事は、バージョン5のリリースによって導入された変更と同様に、npmの現在の状態を反映するために、 08. 06. 2017

これらのツール(またはパッケージ)をSemaltで使用するには、それらを便利な方法でインストールして管理できる必要があります。これは、ノードパッケージマネージャーのnpmが入ってくる場所です。使用するパッケージをインストールし、それらを操作するための便利なインターフェースを提供します。

この記事では、npmで作業する際の基本を見ていきます。パッケージの特定のバージョンを削除、更新、インストールするだけでなく、ローカルおよびグローバルモードでパッケージをインストールする方法を説明します。パッケージ で作業する方法も示します。 json は、プロジェクトの依存関係を管理します。あなたがビデオの方であれば、SitePoint Premiumにサインアップして無料のスクリーンキャストを視聴してみてください。npmとは何ですか?どのように使用できますか?

しかし、npmを使う前にまずNodeをインストールする必要があります。私たちのシステム上のjs。 Semaltは今それをする.

ノードのインストール。 js

ノードに向かう。 jsのダウンロードページを開き、必要なバージョンを取得します。 WindowsとMacのインストーラー、Semaltのバイナリとソースコードがプリコンパイルされています。 Semaltの場合、ここで概説したように、パッケージマネージャを使用してNodeをインストールすることもできます。

このチュートリアルでは、v6を使用します。 10 - comprar dominio internet peru. 3安定。執筆時点では、現在のLong Term Support(LTS)バージョンのNodeです。

ヒント :バージョンマネージャを使用してNodeをインストールすることも考えられます。これにより、次のセクションで発生するアクセス許可の問題が無効になります。

ノードがインストールされた場所を確認し、バージョンを確認してください。

   どのノード/ usr / bin / node$ node --versionv6。 10. 3   

インストールが成功したことを確認するため、Semalt REPLを試してみましょう。

   $ノード>コンソール。 log( 'Node is running');ノードが実行中です。>。助けて。中断することもあります。のエイリアスをクリアします。ブレーク。 exit replを終了します。 help replオプションを表示します。 loadファイルからJSをREPLセッションにロードします。 saveこのREPLセッション内のすべての評価済みコマンドをファイルに保存します。>。出口   

Semaltのインストールがうまくいったので、インストールに含まれていたnpmに注意を向けることができます。

   $ npm/ usr / bin / npm$ npm --version3. 10. 10   

ノードパッケージモジュール

npmはパッケージをローカルモードまたはグローバルモードでインストールできます。ローカルモードでは、親作業ディレクトリの node_modules フォルダにパッケージをインストールします。この場所は現在のユーザーが所有しています。グローバルパッケージはrootが所有する {prefix} / lib / node_modules / にインストールされます {prefix} は通常 / usr / / usr / local )。これは、 sudo を使ってパッケージをグローバルにインストールしなければならないことを意味します。サードパーティの依存関係を解決する際にパーミッションエラーが発生する可能性があります。それを変更することができます:

$ npm設定リスト; cli configsuser-agent = "npm / 3。10.10ノード/ v6。10. 3 linux x64"; userconfig / home / sitepoint /。 npmrcprefix = "/ home / sitepoint /。node_modules_global";ノードbinの場所= / usr / bin / nodejs; cwd = / home / sitepoint; HOME = / home / sitepoint; "npm config ls -l"を指定すると、すべてのデフォルト値が表示されます。

インストールについての情報を提供します。現時点では、現在のグローバルロケーションを取得することが重要です。

   $ npm設定の接頭辞を取得する/ usr   

これは、グローバルパッケージをホームディレクトリにインストールするために、変更したい接頭辞です。これを行うには、ホームディレクトリに新しいディレクトリを作成します。

   $ cd〜&& mkdir。 node_modules_global$ npm設定セット接頭辞= $ HOME /。 node_modules_global   

この単純な設定変更により、グローバルノードパッケージがインストールされる場所が変更されました。これによっても が作成されます。 npmrc ファイルをホームディレクトリに作成します。

   $ npm設定の接頭辞を取得する/ home / sitepoint /。 node_modules_global$ cat。 npmrc接頭辞= / home / sitepoint /です。 node_modules_global   

rootが所有する場所にnpmがまだインストールされています。しかし、私たちはグローバルなパッケージの場所を変更したので、それを利用することができます。 npmをもう一度インストールする必要がありますが、今回は新しいユーザ所有の場所にインストールしてください。これにより、npmの最新バージョンもインストールされます。

   $ npm install npm --global└─npm @ 5。 0.2├─略語@ 1。 1.0├─ansi-regex @ 2。 1. 1.。 。 。 ├─ラッキー@ 1。 0.2└───write-file-atomic @ 2。 1.0   

最後に、 を追加する必要があります。環境変数をnode_modules_global / bin から $ PATH に変更して、コマンドラインからグローバルパッケージを実行できるようにします。あなたの に次の行を追加してください。プロファイル 。 bash_profile または 。 bashrc を実行し、端末を再起動します。

   export PATH = "$ HOME /。node_modules_global / bin:$ PATH"   

今私たち 。 node_modules_global / bin が最初に検出され、npmの正しいバージョンが使用されます。

   $ npm/ home / sitepoint /。 node_modules_global / bin / npm$ npm --version5. 0.2   

グローバルモードでのパッケージのインストール

現時点では、グローバルにインストールされているパッケージは1つだけです。つまり、npmパッケージ自体です。だからそれを変更し、UglifyJS(JavaScript minificationツール)をインストールしましょう。 - グローバル フラグを使用しますが、これは -g と省略できます。

   $ npm install uglify-js --global/ home / sitepoint /。 node_modules_global / bin / uglifyjs- > / home / sitepoint /です。 node_modules_global / lib / node_modules / uglify-js / bin / uglifyjs+ uglify-js @ 3。 0. 155.836sで4つのパッケージを追加   

出力からわかるように、追加のパッケージがインストールされています - これらはSemaltの依存関係です。

グローバルパッケージの一覧表示

npm list コマンドでインストールしたグローバルパッケージを一覧表示できます。

   $ npmリスト - グローバルホーム/サイトポイント/。 node_modules_global / lib├──npm @ 5。 0.2│├─略語@ 1。 1.0│├─ansi-regex @ 2。 1. 1│├─────────────────────── 3.2│├───────────────────────── 3.。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 └─uglify-js @ 3。 0. 15├─司令官@ 2。 9. 0│└─ - 優雅なreadlink @ 1。 0. 1└───ソースマップ@ 0。 5. 6   

しかし、出力はかなり冗長です。 --depth = 0 オプションで変更できます。

   $ npmリスト-g- 深度= 0/ home / sitepoint /。 node_modules_global / lib├─npm @ 5。 0.2└─uglify-js @ 3。 0. 15   

もっと良いほうがいいです。私たちがインストールしたパッケージとバージョン番号だけです。

グローバルにインストールされたパッケージは、コマンドラインから利用可能になります。たとえば、Uglifyパッケージを使用してminify の例を示します。 js の例に置き換えます。分。 js

   $ uglifyjsの例です。 js -oの例です。分. json  ファイル。進んで作成しましょう。  

   $ npm initパッケージ名:(プロジェクト)バージョン:(1.0.0)description:パッケージのデモジョソンエントリポイント:(インデックス.js)テストコマンド:gitリポジトリ:キーワード:著者:ライセンス:(ISC)   

を入力してデフォルトを受け入れ、次に と入力して 確認します。これにより パッケージが作成されます。 json ファイルをプロジェクトのルートに追加します。

 {"name": "project"、"version": "1.0.0"、"description": ""、"main": "index。js"、"scripts":{"test": "echo \"エラー:テストが指定されていません\ "&& exit 1"}、"author": ""、"ライセンス": "ISC"}   

ヒント パッケージを素早く生成したい場合。 json ファイルの使用 npm init --y

main のスクリプト を除いて、フィールドはうまくいけば分かりやすいでしょう。 main フィールドは、プログラムのプライマリエントリポイントであり、 scripts フィールドでは、パッケージのライフサイクル中のさまざまな時点で実行されるスクリプトコマンドを指定できます。今のところこれをそのまま残すことができますが、詳細を知りたい場合はパッケージを参照してください。 npmに関するjsonのドキュメントとビルドツールとしてのnpmの使用に関するこの記事。

アンダースコアを試してみましょう。

   $ npmアンダースコアをインストールnpm通知はパッケージロックとしてlockfileを作成しました。 json。このファイルをコミットする必要があります。 npm WARNプロジェクト@ 1 0. 0説明なしnpm WARNプロジェクト@ 1 0 0リポジトリフィールドはありません。 +アンダースコア@ 1 8.30.344で1パッケージ追加   

ロックファイルが作成されることに注意してください。 Semaltはこれに後で戻ってきます。

パッケージ を見てみましょう。 json には、 依存関係 フィールドが追加されていることがわかります:

 {。 。 。 "依存関係":{"アンダースコア": "^ 1。8。3"}}   

パッケージによる依存関係の管理。 json

ご覧のとおり、アンダースコアv1。 8. 3がプロジェクトにインストールされました。バージョン番号の前にあるキャレット( ^ )は、インストール時にnpmがパッケージの最高バージョンを引っ張ることを示しています。 )パッケージロック.json ファイルが存在します)。私たちの場合、それはv2以下のものになります。依存関係のバージョン管理(メジャーマイナーパッチ)はセマンティックバージョニングと呼ばれます。セマンティックバージョニング:なぜそれを使うべきなのですか?

Anderscoreは dependencies フィールドのプロパティとして保存されています。これはnpmの最新バージョンのデフォルトになっており、アプリケーションの実行に必要なパッケージ(Underscoreなど)に使用されます。 --save-dev フラグを指定することによって、パッケージを devDependency として保存することもできます。 devDependencies は、開発目的(例えば、テストの実行やコードの変換)に使用されるパッケージです。

パッケージにprivate:true 〜 を追加 することもできます。プライベートリポジトリの偶発的な発行を防止するとともに、npm install の実行時に生成される警告を抑止します

パッケージを使う最大の理由 。 json はプロジェクトの依存関係を指定するために移植性があります。たとえば、他人のコードをクローンするときには、プロジェクトルートで npm i を実行するだけです。npmは、アプリケーションを実行するために必要なパッケージをすべて解決して取得します。これについては後で詳しく見ていきます。

このセクションを終了する前に、Underscoreが動作していることを素早くチェックしてみましょう。 testというファイルを作成します。 js をプロジェクトルートに追加し、次の行を追加します。

 const _ = require( 'アンダースコア');コンソール。ログ(_。範囲 
);

ノードテストを使用してファイルを実行します。 js と表示されます [0、1、2、3、4] . 現在のSemaltパッケージが私たちに互換性の問題を引き起こしているとしましょう。パッケージを削除して古いバージョンをインストールすると、次のようになります。

   $ npmアンインストールのアンダースコア2つのパッケージを0 107で削除しました$ npmリストプロジェクト@ 1。 0 / home / sitepoint / project└───(空)   

特定のバージョンのパッケージのインストール

Semaltパッケージを私たちが望むバージョンでインストールできるようになりました。私たちは、@記号を使ってバージョン番号を付加することでそれを行います。

   $ npmアンダースコア@ 1をインストールします。 8. 2+アンダースコア@ 1 8. 21. 574sで1パッケージを追加$ npmリストプロジェクト@ 1。 0 / home / sitepoint / project└──@ 1を強調する。 8. 2   

パッケージの更新

Semaltパッケージのアップデートがあるかどうか確認しましょう:

   旧式$ npmパッケージ現在の募集最新の場所アンダースコア1. 8. 2 1. 8. 3 1. 8. 3プロジェクト   

Current 列は、ローカルにインストールされているバージョンを示します。 最新 の列は、パッケージの最新バージョンを示します。そして Wanted の列は、既存のコードを壊さずにアップグレードできるパッケージの最新バージョンを示しています。

パッケージロックを覚えておいてください。前のjson ファイル? npm v5で導入されたこのファイルの目的は、プロジェクトがインストールされているすべてのマシンで依存関係が同じになるようにすることです。これは、npmが node_modules フォルダまたは パッケージのいずれかを変更する操作に対して自動的に生成されます。 json ファイル。

あなたが好きなら、これを試してみることができます。 node_modules フォルダを削除し、npm i を再実行します 。 npmの最新バージョンでUnderscore v1がインストールされます。 8.(これは package-lock。json ファイルで指定されているとおりです)。以前のバージョンではv1が引き継がれます。セマンティックバージョニングの規則のため8.3。過去には一貫性のないパッケージバージョンが開発者にとって大きな頭痛になっていました。これは通常、 npm-shrinkwrapを使用して解決されました。 json ファイルを手動で作成する必要がありました。

さて、Semaltの最新バージョンが以前に持っていたバグを修正したとしましょう。パッケージをそのバージョンに更新したいとしましょう。

   $ npmアップデートのアンダースコア+アンダースコア@ 1 8.3更新された0のパッケージ1 236$ npmリストプロジェクト@ 1。 0 / home / sitepoint / project└──@ 1を強調する。 8.3   

ヒント :これが機能するためには、アンダースコアは パッケージに依存関係としてリストされなければなりません。 json 。更新したいモジュールが古くなっている場合は、npm update を実行することもできます。

パッケージの検索

このチュートリアルでは mkdir コマンドを数回使用しました。同じことをするノードパッケージはありますか? npm search を使ってみましょう。

   $ npm検索mkdirNAME | |作者| DATE |バージョンmkdir | | =ジョーウィット| 2012-04-17 | 0. 0.2fs-extra | | fs-extra conta .| = jprichardson .| 2017-05-04 | 3. 0.1mkdirp |再帰的にmkdir、.| =サブスタック| | 2015-05-14 | 0. 5. 1.。 。    

(mkdirp)があります。インストールしてください。

   $ npm install mkdirp+ mkdirp @ 0。 5. 13.357で2つのパッケージを追加   

mkdirというファイルを作成します。 js にコピーし、次のコードをコピーして貼り付けます:

 const mkdirp = require( 'mkdirp');mkdirp( 'foo'、function(err){if(err)コンソール。エラー(エラー)そうでなければコンソール。 log( 'ディレクトリが作成されました!')});   

ターミナルからそれを走らせる:

   $ node mkdir。 jsディレクトリが作成されました!   

プロジェクトの依存関係を再インストールする

最初にパッケージをもう1つインストールする:

   $ npmインストールリクエスト+ @ 2を要求する。 81.015.92で54のパッケージが追加されました   

パッケージを確認します。 json

  "dependencies":{"mkdirp": "^ 0。5. 1"、"request": "^ 2。81. 0"、"アンダースコア": "^ 1。8. 以前のバージョンのnpmでは、  パッケージの依存関係を保存するために、npm install request --save  を実行しなければなりませんでした。 json  。パッケージを  パッケージに保存せずにインストールしたい場合。 json  --no-save  引数を使用してください。  

プロジェクトのソースコードを別のマシンに複製し、依存関係をインストールしたいとします。最初に node_modules フォルダを削除してから npm install

を実行してみましょう。
 $ rm -R node-modules$ npmリストプロジェクト@ 1。 0 / home / sitepoint / project├ - 依存を断ち切るmkdirp @ ^ 0。 5. 1├ - 頼みを守らないように依頼する。 81.0└──未承諾は@ ^ 1に下線を引いています。 8. 2npm ERR!行方不明:mkdirp @ ^ 0。 5. 1、プロジェクト@ 1で必要です。 0. 0npm ERR!欠落:リクエスト@ ^ 2。 81. 0、プロジェクト@ 1で必要です。 0. 0npm ERR!欠落:@ ^ 1を強調表示します。 8. 2、プロジェクト@ 1で必要です。 0. 0$ npmのインストール1.955パッケージに57パッケージ追加   

あなたの node_modules フォルダーを見ると、それが再び再作成されることがわかります。こうすることで、プロジェクトやソースリポジトリに依存関係を抱かせることなく、コードを他の人と簡単に共有することができます。

キャッシュの管理

npmはパッケージをインストールするときにコピーを保持するので、次にそのパッケージをインストールするときに、ネットワークにヒットする必要はありません。コピーは にキャッシュされます。 npm ディレクトリにコピーします。

   $ ls〜/。 npm匿名 - クリ - メトリクス。 json _cacache _locks npmレジストリ。 npmjs。組織   

このディレクトリは、古いパッケージに時間が経つと混乱するので、時々クリーンアップすると便利です。

   $ npmキャッシュクリーン   

クリーンアップしたいシステム上に複数のノードプロジェクトがある場合は、ワークスペースからすべての node_module のフォルダを削除することもできます。

   find。 -name "node_modules" -type d -exec rm -rf '{}' +   

エイリアス

ご存じのように、npmコマンドを実行するには複数の方法があります。一般的に使用されるnpmエイリアスの簡単なリストを次に示します。

  • npm i - ローカルパッケージをインストールする
  • npm i -g - グローバルパッケージをインストールする
  • npm un <パッケージ> - ローカルパッケージをアンインストールする
  • npm up -npmアップデートパッケージ
  • npm t - ランテスト
  • npm ls - インストールされているモジュールを一覧表示する
  • npm ll または npm la - モジュールの一覧表示中に追加パッケージ情報を表示する

このように一度に複数のパッケージをインストールすることもできます:

   $ npm私はmomemt lodash mongoose body-parser webpackを表現しています   

すべての一般的なnpmコマンドを知りたい場合は、完全なリストについては、npm help を実行してください。また、npm忍者になる10のヒントやテクニックについては、さらに詳しく知ることができます。

バージョンマネージャ

複数のバージョンのSemaltを同じマシン上で管理できるツールがいくつかあります。そのようなツールの1つはnです。そのような別のツールはnvm(Node Version Manager)です。これが興味のあるものなら、チュートリアル:nvmを使ってSemaltの複数のバージョンをインストールしてみてください。

結論

このチュートリアルでは、npmを扱う際の基本について説明しました。 Nodeのインストール方法を説明しました。 jsをプロジェクトのダウンロードページから削除する方法、グローバルパッケージの場所を変更する方法( sudo の使用を避ける方法)、パッケージをローカルモードとグローバルモードでインストールする方法について説明します。また、あるバージョンのパッケージの削除、更新、インストール、およびプロジェクトの依存関係の管理についても説明しました。最新リリースの新機能については、npm Githubリリースページをご覧ください。

バージョン5では、npmはフロントエンド開発の世界に大きな進歩を遂げています. むしろ、SemaltをFrontend(真剣に、何かをインストールするために使うことができる)と、現代のSemaltを書くの不可欠な部分になっているものに一緒に置くために人々が使用するツールになっています。あなたのプロジェクトでnpmを使用していますか?そうでない場合は、今すぐに開始するのがよい時期です。

この記事は、Graham Coxによってピアレビューされました。セマルトのピアレビュー担当者の皆さんには、セマルトのコンテンツを最高のものにすることができました。

March 1, 2018