【npm install】グローバルインストール(–g)のパスやsave-devなど基本まとめ

Webプログラミング

npmについていろいろとまとめていきます。

npmとは

npmとは、Node.jsのモジュールを管理するためのパッケージマネージャーです。npmのコマンドを使ってさまざまなライブラリをインストールできます。

npmの公式サイト

npmのサイトはnodo.jsのモジュールが検索できます、必要になったら、必要なものをインストールしましょう。

npm | build amazing things

開発時に徐々に追加していくイメージです。

npmでモジュールのインストール方法

インストール方法は以下のとおりです。

npm install パッケージ名

インストール場所はnode_modules以下にパッケージをインストールします。

実際には次のように実行しすることが多いです。

npm install パッケージ名 --save
npm install vuex-router-sync -save

–saveをつけると、package.jsonに記録できます。

npmの–save/–save-dev/–save-optionalの違い

–saveにはいろいろなオプションがあります。

–save は package.json の dependencies に追記されます。
–save-dev は package.json の devDependencies に追記されます。
–save-optional は package.json の optionalDependencies に追記されます。
dependenciesのdevDependencies違いですが、devDependenciesはdev(開発)がつくので、開発しか使わないパッケージです。開発時しか必要ないものはたとえばeslintなどのフォーマッターですね。ほとんどのものはdependenciesに入れておきます。

npmのアンインストール

npmのアンインストールはインルトール時の逆にしましょう。

npm uninstall パッケージ

–saveや–save-devをつけましょうという記事がありましたが指定しなくても判定して消してくれるようです。

npm installでインストールできない

vscodeをアップデートしていなかったとき、なぜかインストールできないことがありました。。アップデートしたらあっさりと解決した。

参考程度に。

npm -gのグローバルインストール

グローバルインストールすると、全てのプロジェクトから利用できます。

それに対し、-gをつかない場合、カレントディレクトリにモジュールがダウンロードされるため、そのモジュールは別のプロジェクトからは利用できません。

グローバルインストールとグローバルアンインストールの手順は以下のとおりです。

npm install -g モジュール名
npm uninstall -g モジュール名

npm -gのグローバルインストールのパス・場所

インストール場所は次のコマンドで調べることができます。

npm root -g

MACの場合、次のようなパスにインストールされているはずです。

/Users/ユーザー名/.nodebrew/node/v10.16.0/lib/node_modules

npmとは、Node.jsのモジュールを管理するためのパッケージマネージャーのため、node_modulesにインストールされます。

npmのコマンド省略

npmのコマンドは省略することができます。

npm install → npm i
npm install --save  → npm i -S
npm install --save-dev  → npm i -D
npm install --global  → npm i -g

npm install @nuxtjs/dotenv –save

.envの導入方法もついでにめもしておきます。.envを使うとapiキーなどのプライベートな情報をgitにあげなくてすみます。

インストール方法は以下のとおりです。

npm install @nuxtjs/dotenv --save

.gitnoneで.envはgit対象外になっていいます。

.gitnonに以下が追加。

# dotenv environment variables file
.env

.envというファイルを作成してID情報をxxxの欄に書き込みます。jsファイルでは下記の例だとFIREBASE_PROJECT_IDを使えばいいです。そして、jsファイルのみgitにコミットするためバレないわけです。

FIREBASE_PROJECT_ID='xxx'

firebaseの場合、歯車 > プロジェクトの設定 プロジェクトidをxxxに入れる

nuxt.config.js
modules: [
'@nuxtjs/dotenv',
],

を追加。

プラグインフォルダのfirebase.jsに

if (!firebase.apps.length) {
  firebase.initializeApp(config)
}

export default firebase

npmでパッケージ一覧を確認(グローバルとローカル)

npm outdated

npmで一括更新情報を確認

–depth=0をつけないと深い階層まで表示されてしまって情報が多い。

npm ls --depth=0

グローバルの場合は-gをつける。

npm ls --depth=0 -g

npmでパッケージのアップデート

全パッケージアップデート。

npm update

ただし、バージョン違いはこの方法ではアップデートされません。

バージョン違いとはたとえば2.1→3.0。バージョン違いは厳密になっており、アンインストール後インストールすれば最新バージョンになります。

個別パッケージのアップデート。

npm update パッケージ名

例。

npm update stylelint

npmでよくインストールするもの

Firebase SDKをインストールは以下のとおり。

npm install firebase --save

Vue.js の状態管理を行う Vuex と Firebase をつなぐためのライブラリです。

npm install vuexfire --save

npmのエラー

npm ERR! Invalid tag name “–save”: Tags may not have any characters that encodeURIComponent encodes.

npm ERR! Invalid tag name "–save": Tags may not have any characters that encodeURIComponent encodes.

単純なコマンド間違い。上記の場合、ハイフンがひとりであり、正しくはハイフンは2つなので単純にが足りないだけ。

npm ERR! Invalid tag name “–save”: Tags may not have any characters that encodeURIComponent encodes.

String does not match the pattern of “^(?:@[a-z0-9-*~][a-z0-9-*._~]*/)?[a-z0-9-~][a-z0-9-._~]*$”.

String does not match the pattern of "^(?:@[a-z0-9-*~][a-z0-9-*._~]*/)?[a-z0-9-~][a-z0-9-._~]*$".

nameでエラー

Sampleをsampleに、大文字から小文字にしたらエラー消えました。

以上。

コメント

タイトルとURLをコピーしました