前回の続きである。

前回は yarn1 系の yarn install コマンドに、 yarn.lock ファイルが存在する場合 Storybook7 の依存性解決が失敗するというバグがあったため、プロジェクトで使用するコマンドをすべて npm に戻したという話をした。

今回は、npm コマンドに戻したことで、 yarn コマンドでは何事もなかった package.json の scripts プロパティ呼び出しが一部失敗するという問題が発生したので、その話をする。

呼び出しが上手くいかなくなったのは、npm-run-all を使用する下記 package.json の 11 行目の build:stg コマンドと、 12 行目の build:prod コマンドである。これは私が STG 環境と PROD 環境向け Build のために 8 行目の build コマンドを参考に追加したものである。8行目の build コマンドは Vue3 の Scaffolding tool にて Project 生成した当初からあったものだ。

package.json
{
  "name": "vue3",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "build:stg": "run-p \"build {@}\" -- --mode stg --sourcemap true",
    "build:prod": "run-p \"build {@}\" -- --mode prod",
    // 省略
  },
  "dependencies": {
    // 省略
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5",
    // 省略
  }
}

yarn だと、正常に動作する。

ところが npm を使用すると失敗する。

vite v5.1.3 building for production...
✓ 0 modules transformed.
x Build failed in 6ms
error during build:
RollupError: Could not resolve entry module "stg/index.html".
    at getRollupEror (file:///Users/work/Desktop/vue3/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
    at error (file:///Users/work/Desktop/vue3/node_modules/rollup/dist/es/shared/parseAst.js:372:42)
    at ModuleLoader.loadEntryModule (file:///Users/work/Desktop/vue3/node_modules/rollup/dist/es/shared/node-entry.js:18928:20)
    at async Promise.all (index 0)
ERROR: "build-only stg" exited with 1.
ERROR: "build --mode stg --sourcemap true" exited with 1.

コマンドに引数を引き渡すための Syntax だと思われる `{@} – -` だが、私は今回のプロジェクトで初めて目にすることになった。これは何物だろう。npm の公式を調べたのだが情報が出てこない。

エラーを眺める限り引数がズレている。それは分かるが、この問題の辛いところはエラー内容が発生している問題を表現していない点にある。キーワードをいろいろと変えて検索を試みたのだが、同じ問題に直面しているページすら発見できなかった。そんなことがあり得るのか？

諦めるのは簡単だ。 STG 環境や PROD 環境向け Build コマンドを 以下のようにしてしまえばいいだけだ。

    "build:stg": "vite build --mode stg --sourcemap true",
    "build:prod": "vite build --mode prod",

しかし、これは敗北である。これでは、型チェックコマンドを別途実行しないといけない。何より折角の build コマンドが再利用できない。再利用できる物は徹底的に再利用するのがプログラマの美徳だ。プロは差分しか書かない。平然と重複コードを許すエンジニアに価値はない。こんなコードは耐えられない。この回避策はあまりに情けない。

ヤケクソ気味になり、ひたすら問題に体当たりしていると、解決方法が判明した。以下のように修正したところ、 npm コマンドで引数が正しく引き渡された。

    "build": "run-p type-check \"build-only {@}\" -- --",
    "build:stg": "run-p \"build {@}\" -- -- --mode stg --sourcemap true",
    "build:prod": "run-p \"build {@}\" -- -- --mode prod",

おわかりだろうか、` – -` をさらにもう一つ追加するのだ。

驚くべきことに、 Vue3 の Scaffolding tool で最初から設定されている build コマンドから間違っていたのである。Vue3 の開発チームはまだ yarn を使っているのかもしれない。

comments