前回の続きである。
前回は 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 生成した当初からあったものだ。
{
"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 を使っているのかもしれない。
