node.jsおよびnpmのTips

npmを使う必要があったので、とりあえず調べて使い方をまとめた。今後もTipsを追加していく。

インストール方法

nodebrewをインストール

brew install nodebrew

Node.jsおよびnpmをインストール

# インストール可能なバージョン一覧を取得
nodebrew ls-remote

# install-binaryを配置するフォルダを作成
mkdir ~/.nodebrew/src

# インストール
nodebrew install-binary v12.2.0
nodebrew install-binary latest # 最新バージョン

# インストール済みのバージョン一覧表示
nodebrew ls

# 特定のバージョンのnodeを有効化する
 nodebrew use v12.2.0

# nodeコマンドにPATHを通す
vi ~/.bash_profile
+ export PATH=$PATH:~/.nodebrew/current/bin
source ~/.bash_profile

# Node.jsのバージョン確認
node -v

# npmのバージョン確認
npm -v

npmの基本的な使い方

npmはNode.jsのパッケージマネージャーである。

パッケージのインストール

# プロジェクトにインストール
npm install パッケージ名1 パッケージ名2 パッケージ名3@1.2.3
# グローバルにインストール
npm install -g パッケージ名1 パッケージ名2 パッケージ名3@1.2.3

パッケージのアンインストール

# プロジェクトからアンインストール
npm uninstall パッケージ名
# グローバルからアンインストール
npm uninstall パッケージ名

インストール済みパッケージ一覧

npm ls

npm-root（node_modulesのフォルダ）の設定

# node_modulesのフォルダを確認
npm root
npm root -g
# node modulesのフォルダを変更
# .npmrcでも変更できる模様
npm config set prefix node_modulesのパス
npm config set -g prefix node_modulesのパス

package.jsonによるパッケージ管理

package.jsonの定義に従ってまとめてパッケージをインストールすることができる。

現在installされているパッケージを元に、package.jsonを作成する

npm init

package.jsonのサンプル

{
  "name": "vue-sample",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    (省略)
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    (省略)
  }
}

dependenciesとdevDependenciesの二種類ある。

• dependenciesは本番用。本番環境と開発環境の両方で適用される
• devDependenciesは開発用。本番環境では適用されない

package.jsonの定義に従って、パッケージをインストールする

--productionオプションの有無で、インストールする対象のパッケージが異なることに注意。

# 全部（つまりdependencies+devDependencies）インストール
npm install

# 本番用（つまりdependenciesのみ）インストール
npm install --production

パッケージをインストール/アンインストールして、package.jsonにも記録する

--saveオプションをつけると、package.jsonにも記録される。

# dependenciesに記録する
npm install --save パッケージ名
npm uinstall --save パッケージ名

# devDependenciesに記録する
npm install --save-dev パッケージ名
npm uninstall --save-dev パッケージ名

package.jsonによるタスク管理

npmはタスクランナーとしても使える。非常にシンプルでわかりやすい。

package.jsonのscriptsにタスクを定義する

調べたのだが、scriptを複数行実行することはできない模様。
とりあえず複数コマンドを実行したい場合は&&で繋いで実行する。

{
  "name": "vue-sample",
  (省略)
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "sample": "pwd && ls -la"
  },
  (省略)
}

定義されたタスクを実行する

npm run タスク名でタスクを実行することができる。

npm run serve
npm run build
npm run lint
npm run sample