【npm7の覚書】npm自体と各パッケージのアップデート/yarn.lockとpackage-lock.json

おすすめのオンラインプログラミング学習

npmの使い方をまとめていきます。

npmとは

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

npmの公式サイト

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

npm

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

スポンサーリンク

npmのパッケージとnpm自体のアップデート

npm自体のアップデート(npm install -g npmとnpm update -g npmの違い)

npm6からnpm7にバージョンを変更したい場合はこちらです。

npm install -g npm

nom6を使っていた場合、ver7にはなりません。ver6の最新バージョンになります。

npm update -g npm

npmのバージョン確認

npm -v

node.jsのアップグレード

node.jsも一緒にアップグレードしたいことがあるでしょう。こちらによくまとまったいたためリンクの紹介のみで。

Node.js バージョンアップのメモ - Qiita
nuxtを立ち上げると以下のエラーが発生した。 Error: No valid exports main found for '/app/node_modules/colorette' node.jsのバージョンが古いのが原因の...

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
スポンサーリンク

npm7でyarn.lockの生成

package-lock.jsonをyarn.lockに変換する

都合上、yarn.lockが必要になりました。package-lock.jsonをyarn.lockに変換するにはyarn importがあります。

npm install -g yarn
yarn import(package-lock.jsonをyarn.lockに変換)

そのあと、package-lock.jsonをプロジェクトから外しました(競合の回避)

不具合の対応は上記だけではうまくいかず、再インストールが必要かもしれません。

yarn remove パッケージ名
yarn add パッケージ名

npm7はyarn.lockをサポートしているため、npm run devで実行できます(yarn runn devでもOK)。

package-lock.jsonよりも、yarn.lockの方がバージョンの整合性は信頼がありそうです。

package-lock.jsonとyarn.lockの互換性

とりあえず、両方lock.jsonを用意してnpm installすると、両方に書き込まれることは確認しました。

スポンサーリンク

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でよくインストールするもの

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

npm install firebase --save

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

npm install vuexfire --save

コメント

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