LoginSignup
0
0

More than 1 year has passed since last update.

【Intellij IDEA(Ultimate)】npmなどのパッケージマネージャーをインストール/アップデートする

Posted at

前書き

Intellij IDEA(Ultimate)では、npmのようなパッケージマネージャーをIDEから個別にインストールすることが可能です。
IDEA経由でパッケージマネージャーをインストールする場合、以下のようなメリットを得ることができます。

  • ローカルの開発環境とは別に、各種パッケージマネージャー(バージョン違い含む)を、プロジェクトやRun/Debug Configurationsで個別適用することができる
    • 切り替えも容易にできる
  • WindowsmacUbuntuといった各種プラットフォームを跨いでも、同じような操作感で環境構築できる

この記事では、IDEAでパッケージマネージャのインストール、Run/Debug Configurationsでの設定、及びアップデートする方法についてまとめます。
使用しているIDEAのバージョンは2021.1.3で、Windows環境です(環境ごとの差異はそれ程無いと思います)。

補足: この記事の前提

この記事では、ローカルでNodeが実行できる状態(PATHは通ってなくてもOK)を前提に書きます。
理由は、自分の環境のIDEAからNodeをインストールする方法を見つけられなかったためです。

ドキュメントを見る限りインストールできそうに見え、また実際に自分の環境でもIDEA経由でインストールした形跡が有るのですが、少なくとも自分の環境ではドキュメント通りに進んでもNodeのインストールメニューにはたどり着けないようでした。

やり方

パッケージマネージャのインストール

パッケージマネージャーのインストール手順はざっくり以下の通りです。

  1. Settingsからnpmで探して、Node.js and NPMを選ぶ
  2. Node interpreterを設定する
  3. Package managerを設定する

以下、それぞれの項目について説明します。

1. Settingsからnpmで探して、Node.js and NPMを選ぶ

まず、Settingsを開き、左上の検索欄にnpmと入力します。
すると以下のように、Languages & Frameworks > Node.js and NPMが開きます。
image.png

自分の環境ではNodePATHを通していないためNode interpreterNo executable found in...となっていますが、適切にPATHが通っていればこの設定の必要は有りません。

2. Node interpreterを設定する

前項にてPATHが通っており、そこから変更が不要な場合、この項は飛ばして大丈夫です。

Node interpreterの右に有る...をクリックすると、Node.js Interpretersというウィンドウが開きます。
このウィンドウには、インストールされているNodeの内IDEAが捕捉している内容が表示されます。
image.png

ここに表示されていないものを使いたい場合、左上の+ボタンから追加できます。
既にインストールされているものが有る場合、Localから追加できます。
image.png

この選択肢の詳細はドキュメントにまとまっています。

3. Package managerを設定する

Package managerには、選択したNodeに合わせたバージョンのnpmがデフォルトで設定されます。
image.png

Package managerは、ローカルにインストールされているものや、プロジェクトに個別で導入されたものの中から選択することができます。
画像の通り、yarnpnpmといった内容も選択できます。
image.png

Package managerの文言の下の+ボタンを押すとAvailable Packagesというウィンドウが開き、そこからPackageを追加することもできます。
ここでは、バージョンやオプションの指定が可能です。

画像ではyarnを検索・選択しています。
ここでInstall Packageを実行すればインストールが完了します。
image.png

ここでインストールしたパッケージマネージャーは、前述した通り、Package managerとして利用できるようになります。

Run/Debug Configurationsの設定

ここまでで確認した内容はプロジェクトのデフォルト設定に関する内容です。
個別に変えたい部分が有る場合、Run/Debug Configurationsから設定することができます。

具体的には、以下の画像のNode interpreter/Package managerの項目がそれです。
image.png

Run/Debug Configurationsでのnpmの具体的な設定方法は以下の記事で紹介しているため、ここでは触れません。

パッケージマネージャのアップデート

先ほど紹介したAvailable Packagesからは、バージョンの変更(= アップデート)を行うことも可能です。
具体的には、アップデートしたいPackage managerを選択してAvailable Packagesを開き、右下のSpecify versionにチェックを付け、インストールしたいバージョンを選んだ上で、左下のInstall Packageを実行すればできます。
image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0