npmについていろいろとまとめていきます。
npmとは
npmとは、Node.jsのモジュールを管理するためのパッケージマネージャーです。npmのコマンドを使ってさまざまなライブラリをインストールできます。
npmの公式サイト
npmのサイトはnodo.jsのモジュールが検索できます、必要になったら、必要なものをインストールしましょう。
開発時に徐々に追加していくイメージです。
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-dev は package.json の devDependencies に追記されます。
–save-optional は package.json の optionalDependencies に追記されます。
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。バージョン違いは厳密になっており、アンインストール後インストールすれば最新バージョンになります。
もしくは@latestをつけるとバージョン違いでもアップデートできます。この方が早いですね。
npm install firebase-admin@latestなお@がついているものはバージョン指定でインストールしないとうまくインストールできないようです。
npm install @nuxtjs/eslint-module@3.0.2 --save-dev個別パッケージのアップデート。
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に、大文字から小文字にしたらエラー消えました。
以上。
コメント