💙

mise入門(1) Zenn執筆環境、viteフロントエンド開発環境の移行

に公開

はじめに

これまでWSL2上でPython/Node.jsの開発環境を構築していたが、mise/uv/nodeへと移行することにした。
まずはZennの記事執筆環境、viteフロントエンド開発環境を移行する。

前提として、どちらも既にrepositoryがGithubに存在している。

移行前後の開発環境

Install Git for Windows

以下のいずれかのウェブサイトからインストーラをダウンロードしてインストールする。

どちらからダウンロードしても同じ。

次にGithubからZenn記事のリポジトリ、viteフロントエンドプロジェクトのあるリポジトリをクローンする。

C:\Users{ユーザ名}.ssh\config

Host github github.com
    HostName github.com
    IdentityFile  C:/Users/{ユーザ名}/.ssh/id_rsa #ここに自分の鍵のファイル名
    User git

Install mise on Windows

mise公式の通り、winget install jdx.miseでダウンロードする。

mise-en-place

Zennの起動

mise install node@20
mise use node@20
mise activate
mise exec node@20 -- npx zenn preview # 既存の起動コマンドを呼び出す。以下の通り設定すると簡略化できる。

※Nodeのバージョンが古いが、追々先月リリースされたv24へのアップグレードをしたい。

mise.tomlファイルに以下の通り追記する。

[tools]
node = "20"

; ここから下
[tasks.preview]
run = "npx zenn preview"

すると、以下のコマンドでZennを起動できる。

mise run preview

viteプロジェクトの起動

mise install node@20
mise use node@20
mise activate
mise exec node@20 -- npm install
mise exec node@20 -- npm run dev # 既存の起動コマンドを呼び出す。以下の通り設定すると簡略化できる。

mise.tomlファイルに以下の通り追記する。

[tools]
node = "20"

; ここから下
[tasks.dev]
run = "npm run dev"

すると、以下のコマンドでviteフロントエンドプロジェクトを起動できる。

mise run dev

おわりに

まずはZennの記事執筆環境をmiseに移行できた。
なお、Node.jsからBun/Denoへと移行することも頭をよぎったが、一旦はmiseへの移行に焦点を絞ってNode.jsを使うことにした。

Discussion