目次 [隠す]
記事概要
- 不要なCSSを整理するツール「PurgeCss」を使ってみたいと思ったがnode.js、npmの環境が必要である。
- だがUbuntuのリポジトリにあるnodejsのバージョンが古い。
- よって新しいバージョンをインストールするまでの手順を備忘録として記す。
作業環境
Ubuntu 22.04.4 LTS（WSL2 on Windows11 Proで作動）
作業詳細
主に以下ドキュメントに従って作業を行う。
WSL 2 上で Node.jis を設定する
Linux 用 Windows サブシステム (WSL) 上で Node.js 開発環境を設定するのに役立つガイド。
nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions
Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - nvm-sh/nvm
事前作業
現時点（2024/04/06）におけるnode.jsのバージョンは「v20.12.1」。
リポジトリのnode.jsのバージョン確認
$ sudo apt show nodejs
Package: nodejs
Version: 12.22.9~dfsg-1ubuntu3.4
Priority: extra
Section: universe/web
Origin: Ubuntu
古い。
このことはMicrosoftのドキュメントにも記載されていた。
バージョン マネージャーをインストールする前に、ご利用のオペレーティング システムから Node.js または npm の既存のインストールを削除することをお勧めします。インストールの種類が異なると、奇妙で混乱を招く競合が発生する可能性があるためです。 たとえば、Ubuntu の apt-get コマンドを使用してインストールできる Node のバージョンは、現在期限切れになっています。 以前のインストールの削除に関するヘルプについては、ubuntu から nodejs を削除する方法に関するページを参照してください。
既にubuntuのリポジトリでnode.jsのインストールを試みていたりした場合は削除しておく。
既存のnode.jsをアンインストール
$ sudo apt purge nodejs
$ sudo apt autoremove
nvmをインストール
以下コマンドでnvmをインストールする。
nvmインストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
wsl2を再起動。（Windows Terminalであれば新しいタブを開き既存を閉じる）
次のコマンドを実行し「npm」が返ってくることを確認。（無い場合はインストールできていないのでログを確認）
nvmインストール
$ command -v nvm
nvm
node.jsをインストール
LTS（Long Term Support）のnode.jsを以下コマンドでインストールする。
node.jsインストール
$ nvm install --lts
Installing latest LTS version.
Downloading and installing node v20.12.1...
Downloading https://nodejs.org/dist/v20.12.1/node-v20.12.1-linux-x64.tar.xz...
################################################################################################ 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v20.12.1 (npm v10.5.0)
Creating default alias: default -> lts/* (-> v20.12.1)
インストールされたnode.jsのバージョンを確認する。
node.jsバージョン
$ nvm ls
-> v20.12.1
system
default -> lts/* (-> v20.12.1)
同時にインストールされたnpmのバージョンを確認する。
npmバージョン
$ npm -v
10.5.0
本記事の主目的は以上。
追加作業-1: sudo権限でも利用できるようシンボリックリンクを貼る
以下記事を参考に作業を行う。
【Linux】シンボリックリンクの作成,確認,変更,削除について解説｜YesNoCode
Linuxのシンボリックリンクの使い方がわからない・・・。そんな方向けに本記事ではシンボリックリンクの作成から確認・変更・削除方法まで簡潔に解説しております。
node、npm、n、それぞれのパスを確認する。
パスの確認
$ which node
/home/username/.nvm/versions/node/v21.7.2/bin/node
$ which npm
/home/username/.nvm/versions/node/v21.7.2/bin/npm
$ which n
/home/username/.nvm/versions/node/v21.7.2/bin/n
それぞれのパスにシンボリックリンクを貼る。（失敗した場合の変更、削除は先ほどのサイトで確認）
シンボリックリンク追加
$ sudo ln -s /home/username/.nvm/versions/node/v21.7.2/bin/node /usr/bin/node
$ sudo ln -s /home/username/.nvm/versions/node/v21.7.2/bin/npm /usr/bin/npm
$ sudo ln -s /home/username/.nvm/versions/node/v21.7.2/bin/n /usr/bin/n
追加作業-2: PurgeCSSをインストールする
以下コマンドでnode.jsとnpmのアップデートを行う。
node.jsとnpmをアップデート
$ sudo npm install -g n
added 1 package in 1s
$ sudo n stable
copying : node/20.12.1
installed : v20.12.1 (with npm 10.5.0)
PurgeCSSのインストール
PurgeCssインストール
$ npm install -g purgecss
コメント