デザイナかとおもいきやVue.jsのビルドに手を出しているオッコです。
目的：monacaで作成したvue.jsのプロジェクトのビルドを成功させる
詰まったところ：トランスパイルができなかった。Node.jsがそもそもなかったり、webpackがなかったり、cross-envがなかったり、その他もろもろエラーが出まくった。
環境：Windows11 pro
トランスパイルする際に出たエラー一覧と、解消方法です。
原因①node.jsがインストールされてない。
node -vコマンドプロンプトを開いて、上記を打って v20.10.0 等と表示されていたら問題ない。
バージョン情報が出なかった場合、Node.jsをインストールする必要があるので、下記サイトからインストーラをダウンロードする
https://nodejs.org/en/download
↑ダウンロードしたパッケージを開いて、Node.jsのインストールを完了させる。
原因②cross-envの読み込み不足
ビルド時のエラー文
Running Transpiler...
> f7-vue3-minimal@1.2.0 monaca:debug
> npm run watch
> f7-vue3-minimal@1.2.0 watch
> cross-env NODE_ENV=production webpack --watch --config ./script/webpack.config.js
'cross-env' �́A�����R�}���h�܂��͊O���R�}���h�A
����\�ȃv���O�����܂��̓o�b�` �t�@�C���Ƃ��ĔF������Ă��܂���B 解消方法
npm install --global cross-env上記を実行する。–globalはつけるの賛否あるみたいなので調べていいコマンドがあったらそっちを打ってください（適当）
原因③webpackの読み込み不足
> cross-env NODE_ENV=production webpack --watch --config ./script/webpack.config.js
'webpack' �́A�����R�}���h�܂��͊O���R�}���h�A
����\�ȃv���O�����܂��̓o�b�` �t�@�C���Ƃ��ĔF������Ă��܂���B
node:events:491
throw er; // Unhandled 'error' event 原因②と同様に、モジュールが不足している。
解消方法
npm install --save-dev webpack上記を実行する。
Do you want to install 'webpack-cli' (yes/no): ↑webpack cliも入れるか聞かれたらyes
原因④ プロジェクトの階層でnpmを実行していない
めんどうくさがって上の階層で実行しようとして、そのことを忘れていて、しばらく沼にはまりました。
package.jsonの情報が必要なので、トランスパイルしたいプロジェクトが既にあるならその階層まで降りないとだめでした。
沼っていた頃に見たエラー文
Running Transpiler...
Transpiling finished for C:\Users\(ユーザー名)\(プロジェクト名)
> f7-vue3-minimal@1.2.0 monaca:debug
> npm run watch
> f7-vue3-minimal@1.2.0 watch
> cross-env NODE_ENV=production webpack --watch --config ./script/webpack.config.js
[webpack-cli] Failed to load 'C:\Users\(ユーザー名)\(プロジェクト名)\script\webpack.config.js' config
[webpack-cli] Error: Cannot find module 'copy-webpack-plugin'脳死で素直にcopy-webpack-pluginをインストールすると、次はこうなります
Running Transpiler...
> f7-vue3-minimal@1.2.0 monaca:debug
> npm run watch
> f7-vue3-minimal@1.2.0 watch
> cross-env NODE_ENV=production webpack --watch --config ./script/webpack.config.js
[webpack-cli] Failed to load 'C:\Users\(ユーザー名)\(プロジェクト名)\script\webpack.config.js' config
[webpack-cli] Error: Cannot find module 'html-webpack-plugin'脳死で素直にhtml-webpack-pluginをインストールすると、次はこうなります
Running Transpiler...
> f7-vue3-minimal@1.2.0 monaca:debug
> npm run watch
> f7-vue3-minimal@1.2.0 watch
> cross-env NODE_ENV=production webpack --watch --config ./script/webpack.config.js
[webpack-cli] Failed to load 'C:\Users\(ユーザー名)\(プロジェクト名)\script\webpack.config.js' config
[webpack-cli] Error: Cannot find module 'vue-loader'脳死で素直にvue-loaderをインストールして以下のエラーを見たあたりで一旦ディスプレイを破壊し、会社を早退し、オフィスビルごと吹き飛ばしました。
Running Transpiler...
> f7-vue3-minimal@1.2.0 monaca:debug
> npm run watch
> f7-vue3-minimal@1.2.0 watch
> cross-env NODE_ENV=production webpack --watch --config ./script/webpack.config.js
[webpack-cli] Failed to load 'C:\Users\(ユーザー名)\(プロジェクト名)\script\webpack.config.js' config
[webpack-cli] Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.心機一転してNode.jsの最新安定バージョンを公式サイトからダウンロードしました。
そこでnpm init した際にpackagenameを求められたとき、プロジェクト用のpackage.jsonが必要なことに気が付きました。→npmの実行ディレクトリが
C:\Users\(ユーザー名)\になっていたことに気づき、
C:\Users\(ユーザー名)\(プロジェクト名)\で再度npm installしたら、vue.jsプロジェクトのビルドに成功しました。
Macの場合は、nvmをインストールして同様にcross-envとwebpackを入れたらいけました。
現状はプロジェクトを作るごとにこの作業が必要になっているので、もっと楽な方法があれば教えてください。
この辺全然詳しくないのに、黒い画面のコマンドプロンプトがかっこいいというモチベだけで何とかやっています。
間違っているところがあればそれも指摘ください。黒い画面のコマンドプロンプトがかっこいいので。
参考：
https://qiita.com/wagi0716/items/94193a80502f9d81a9e0
https://zenn.dev/json_hardcoder/articles/8d88eef460ceee
https://zenn.dev/ikeo/articles/8d0c88dcedf256b09f73
https://qiita.com/ffggss/items/94f1c4c5d311db2ec71a
https://www.npmjs.com/package/webpack
https://www.sejuku.net/blog/83439
関連記事紹介
AIを導入しリーズナブルで確実と信頼があるホームページ制作はアピステクノロジーへ
アピステクノロジーでは、特注システム開発をはじめ、AIを導入したHPの制作にも力を入れています。
WordPressはもちろん、ShopifyのECサイトもご要望に応じて制作いたします。
詳しくは弊社HPをご覧ください。
アピステクノロジーの実績紹介はこちら
システムの入ったパッケージ「ITツール」紹介ページはこちら
アピステクノロジーでは、IT専門家としておすすめPCの販売も行っています！
