WordPress プラグイン「ameliabooking」にあるVueファイルを編集してビルドする

WordPressで、予約システムが構築できるプラグイン「ameliabooking」にあるVueファイルを編集してビルドする手順を記述してます。
環境
- WordPress 5.7
- サーバー ubuntu
nodeインストール
レイアウトがvueで作成されているため、vueファイルを編集して変更を適応するにはnpmでビルドが必要となります。
nodeとnpmがインストールされていない場合は、作業できないのでインストールします。
- CentOS8 最新版のnode14とyarnをインストールする手順
- Centos7 node.js v11をインストールする
- windows10 scoopを使ってnode.jsをインストールする
- Mac node.jsをインストールする
- Ubuntu19.10に最新のnode.jsをインストールする
Vueファイルを編集
編集するvueファイルは、「wp-content/plugins/ameliabooking/assets/views」に存在します

必要パッケージインストール
「wp-content/plugins/ameliabooking/」に移動して、以下のコマンドを実行します。
npm run inst
これでうまくいけば、問題ないですが、自分の場合は「node-sass」と「libpng-dev」でERRORとなったので、
「package-lock.json」と「node_modules」を削除して、キャシュをクリア後に「node-sass」だけをインストールしてます。
rm -rf package-lock.json node_modules
npm cache clean --force
npm i --unsafe-perm node-sass
「libpng-dev」の方は、インストールしておきます。
sudo apt install -y libpng-dev
これで以下を実行してもエラーはなくなりました。
npm run inst
ビルド
自分の場合は、以下でビルドすると
npm run production
jqueryがないとエラーになったので、
Module not found: Error: Can't resolve 'jquery' in
jqueryをインストールしてからビルドを実行しました
npm i jquery
これで、vueの編集した結果が反映されました。
-
前の記事
python openpyxlを使ってEXCELのセルの背景色を変更する 2021.04.07
-
次の記事
gitlab マージを実行する 2021.04.07
コメントを書く