Closed7

Nuxt3, Vue3 に触れる

Tashiro YutakaTashiro 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/ を参照しにいき、ここに指定されたバージョンのパッケージマネージャーがないということでエラーになっていた。

Tashiro YutakaTashiro Yutaka

Nuxt.js の関連ライブラリが多い

一旦以下は把握したほうが良さそう

これらの関連ライブラリは unjs にまとまっていて Nuxt.js 固有ではなく汎用的なライブラリ

そのほかに便利そうなライブラリ

  • defu: オブジェクトのデフォルト値を設定する
  • destr: 安全かつ高速に JSON.parse() をする、型も使いやすく
このスクラップは6ヶ月前にクローズされました