Closed2024/01/21にクローズ7

Nuxt3, Vue3 に触れる

Vite

Nuxt 3

Tashiro Yutaka

リリースされてから時間が経過しているが Nuxt3, Vue3 に触れる。

Tashiro Yutaka

リポジトリ

https://github.com/ytk6565/nuxt-trial

Tashiro Yutaka

アプリケーションのセットアップ

# Nuxt アプリケーションの雛形をインストール
$ npx nuxi@latest init my-app

# .node-version で Node.js のバージョンを固定
$ touch .node-version
$ echo "18.16.1" > .node-version

# corepack で pnpm を指定
$ npm pkg set "packageManager"="pnpm@8.6.2+sha1."$(npm show pnpm@8.6.2 dist.shasum)

# pnpm で依存パッケージをインストール
$ pnpm install

corepack のパッケージマネージャーの指定でバイナリのハッシュ値を指定した方がセキュリティ観点で良いとされているので対応している。
- corepack にデフォルトでバイナリのハッシュ値を取得するコマンドがないため npm のコマンドで対応している。
  - shasum は sha1 のハッシュを検証するプログラムらしい。
  - sha256sum などもあるようなので shasum は sha1sum と理解すれば良い？
- 関連 Issue：https://github.com/nodejs/corepack/issues/231

誤って2023年6月時点で存在しない pnpm のバージョン（8.16.2）を指定してしまい変なところでハマった。

$ npm pkg set 'packageManager'='pnpm@8.16.2'

$ pnpm i
Internal Error: Server answered with HTTP 404
    at ClientRequest.<anonymous> (/Users/foo/.nodenv/versions/18.16.0/lib/node_modules/corepack/dist/corepack.js:43949:23)
    at Object.onceWrapper (node:events:628:26)
    at ClientRequest.emit (node:events:513:28)
    at HTTPParser.parserOnIncomingClient (node:_http_client:701:27)
    at HTTPParser.parserOnHeadersComplete (node:_http_common:119:17)
    at TLSSocket.socketOnData (node:_http_client:542:22)
    at TLSSocket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)

ローカルの corepack に存在しないパッケージマネージャーが指定されたとき、パッケージマネージャーをダウンロードするためにデフォルトで https://registry.npmjs.org/ を参照しにいき、ここに指定されたバージョンのパッケージマネージャーがないということでエラーになっていた。