npmの使い方をまとめていきます。
npmとは
npmとは、Node.jsのモジュールを管理するためのパッケージマネージャーです。npmのコマンドを使ってさまざまなライブラリをインストールできます。
npmの公式サイト
npmのサイトはnodo.jsのモジュールが検索できます、必要になったら、必要なものをインストールしましょう。
開発時に徐々に追加していくイメージです。
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も一緒にアップグレードしたいことがあるでしょう。こちらによくまとまったいたためリンクの紹介のみで。
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パッケージのダウングレード
npmの場合、やや面倒ですが消去したのちバージョン指定してインストールする必要があります。
npm remove vee-validate
npm install --save vee-validate@3.4.9バッケージ名は再インストールしたいものに変更してください。
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の互換性
npm 7 からyarn.lockも見て更新してくれるんだ
> the npm CLI can now use yarn.lock as the source of package metadata and resolution guidance. If a yarn.lock file is present, then npm will also keep it up-to-date with the contents of the package tree.https://t.co/LIBImikGFc
— spice (@rabspice) February 3, 2021
とりあえず、両方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-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 list -g --depth=0npmのコマンド省略
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
コメント