とある作業中にnpm create vite@latest . -- --template reactをしたら大量のWARNINGが出た。
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: 'create-vite@5.5.2',
npm WARN EBADENGINE required: { node: '^18.0.0 || >=20.0.0' },
npm WARN EBADENGINE current: { node: 'v19.5.0', npm: '9.3.1' }
npm WARN EBADENGINE }
これはviteが要求するNode.jsのバージョンに対して、現在の環境のバージョンが満たされていないという事らしい。
なのでNode.jsのバージョンを上げてみた。
※自身の備忘録なので少し細かいかもしれません。必要な箇所だけ参考にしてください。
※間違いがありましたら指摘してもらえると嬉しいです！
nvmの利用
まず、バージョンを上げるにあたってGoogle先生に聞いてみたところ、nvmというのがあるらしい。
最初にNode.jsをローカルに入れたときの記憶は既になく(nだと思ったら違った・・・)、新たにnvmでやってみる。
nvmって何ぞ
nvm => Node Version Managerという事らしい。
多機能で便利な機能がそろっており、人気も高く、更には情報も豊富 との無敵感が満載で、迷うことなく導入を決意。
今までNode.jsを使う事が少なかったというのもあるが、 プロジェクトごとに切り替えれる というのはこれからきちんと使いこなしていきたいなという点ではあった。
nvmの導入
※私の場合、WSL2 ubuntu環境ですが、それぞれの環境に合わせてターミナルを開き作業をしてください。
まずは、次のコマンドを使ってnvmを使うためのスクリプトをダウンロードし、インストールします。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
無事に完了したら次にターミナルを再起動するか、source ~/.bashrcをしてあげる必要があります。
ほうほう・・・じゃあ！ということで何も気にせずsource ~/.bashrcをしてみると、謎のエラー多発！！！
何事じゃ！？と思って冷静に考えてみたら、bashじゃなくてzshを使っていた気がする・・・
ということで一応確認。
echo $SHELL
結果、zshとなっていたので、再度source ~/.zshrcを実行。
今度は問題なくできた！
※注意
何かしらの問題がおきて、bashrcやzshrcが存在しないとかがあった場合には、まずは該当ファイルを作成し、
echo 'export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion' >> ~/.zshrc
を実行してあげて該当ファイルに書き込んでください！(直接vimなどで書き込んでもOK、末尾の>>の後を自身の環境に合わせる)
最新バージョンのインストール
無事nvmが入ったら次にインストールをする。
今回は最新のLTS版を利用したかったので次のコマンドでインストールする
nvm install --lts
もしもバージョンを指定したい場合には
nvm install v20.16.0
のようにしてバージョン指定してください。
これだと、まだ落としただけなので次のようにしてバージョンを選択します。
nvm use --lts
これもinstallと同様に末尾にバージョンを指定してあげることができます。
最後に、きちんと設定されているか確認するために
node --version
を行いバージョンが表示されたら完了です！
その他のコマンド
バージョンを確認する
nvm ls
特定のバージョンをアンインストールする
nvm uninstall v20.16.0
終わりに
環境構築するときに昔やった事って忘れがちで、全く覚えていなかったのでこういった備忘録をしっかり残していこうと再確認できた。
メモ、大事。