ゲーム(仮称)_技術_Vue.jsの導入
かあスレッド_vue導入
関連
npm(Node Package Manager)
jsのパッケージ管理ツール。vue導入の際のプロセス管理に使われる
依存関係を解決してくれる。
まずはこれを入れる
npmの導入
Node.jsと一緒にインストールされるので、npm導入 = Node.jsパッケージの導入から始まる
ローカルに入れてみる
node.jsの導入
homebrewでいれる
brew install node@20
node@20 is keg-only, which means it was not symlinked into /usr/local,
because this is an alternate version of another formula.
If you need to have node@20 first in your PATH, run:
echo 'export PATH="/usr/local/opt/node@20/bin:$PATH"' >> ~/.zshrc
For compilers to find node@20 you may need to set:
export LDFLAGS="-L/usr/local/opt/node@20/lib"
export CPPFLAGS="-I/usr/local/opt/node@20/include"
==> Summary
🍺 /usr/local/Cellar/node@20/20.17.0: 2,068 files, 60.3MB
==> Running `brew cleanup node@20`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).
これはエラーではなく、異なるバージョンが他のバージョンと衝突しないようにPATHにはリンクしてませんよという表記。
昔入れたものと競合する恐れがあるので。
なので、書いているように
echo 'export PATH="/usr/local/opt/node@20/bin:$PATH"' >> ~/.zshrc
を実行する ターミナルを再起動。
node -v
# v20.17.0
npm -v
# 10.8.2
いけた。
vue.jsの導入
laravelプロジェクトのディレクトリに移動
~/Desktop/Laravel_kirThread/local/laravel_kirthread/backend
最新のものを入れよう
$ npm install vue@3.4
npm install vue@3.4
added 2 packages, removed 7 packages, changed 7 packages, and audited 1165 packages in 8s
22 packages are looking for funding
run `npm fund` for details
81 vulnerabilities (2 low, 55 moderate, 24 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
同じように脆弱性があるらしいので、
npm audit fix
を実行しておく確認する
# ver確認
npm list vue
# 指定のパスに、vue 3.4.38が導入されていることがわかる
backend@ /Users/skoni/Desktop/Laravel_kirThread/local/laravel_kirthread/backend
└─┬ vue@3.4.38
└─┬ @vue/server-renderer@3.4.38
└── vue@3.4.38 deduped
また、
backend/package.json
に導入したvueの情報が記載される "devDependencies": {
"axios": "^0.19",
...
"vue": "3.4", // これ
"vue-template-compiler": "^2.6.10"
}
コンパイルの不具合
npm run dev
Error:
Vue packages version mismatch:
- vue@3.4.38 (/Users/skoni/Desktop/Laravel_kirThread/local/laravel_kirthread/backend/node_modules/vue/index.js)
- vue-template-compiler@2.7.16 (/Users/skoni/Desktop/Laravel_kirThread/local/laravel_kirthread/backend/node_modules/vue-template-compiler/package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
元々古いvueを動かしていたので、コンパイラとのバージョンがあってないらしい。
整理する
npm uninstall vue-template-compiler
npm install @vue/compiler-sfc
もう一回実行したところ、package.jsonに消えたはずのvue-template-compilerが復活していた
これはlaravel-mixが依存関係を解決しようとしてコンパイラを入れているから。
laravel-mixが古い可能性がある。
# laravel-mixのバージョンを上げる
npm view laravel-mix version
# 表示されたものをpackage.jsonに書き込む
"laravel-mix": "^6.0.49",
package.lockファイルを削除し、キャッシュなどの問題を一旦考慮しないようにする
これでnpm installすると、jsonに書かれたものが導入される
コンパイルテスト
npm run dev
すると、動くようになったがエラーが大量に出る 昔書いたコードが悪さしてるっぽいので、一旦全部消す
exampleだけにしとく
scss
のエラーがいっぱい出る 現状使ってないので、
webpack.mix.js
のscssに関する表記をコメントアウトしておくmix.js('resources/js/app.js', 'public/js').vue()
// .sass('resources/sass/app.scss', 'public/css')
.version();
ただしこれを行うと画面のレイアウトが崩れる。
{{-- vue.js --}}
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
その他ファイルもまとめてコンパイルしてまとめているのだろうか?
こっちもパッケージを最新にしてみよう
npm view sass version
npm view sass-loader version
# で確認して、その値をpackage.jsonに書く→lockファイルを消す→npm install
エラー出なくなった!
実行
良さそう。
テストコードを書きたい
vite
と Laravel Mix
について どちらもフロントエンドのアセットをビルドするためのツール。同時に使用することはない。
laravel mix
webpackをベースとしたビルドツールであり、laravelの公式サポートを受けている
vite
最近の流行り。laravelのバージョンが新しい場合、デフォルトでサポートされている
その他記事:viteディレクティブを使う
vite
を採用することにしたので、 laravel mix
を取り除く webpack.mix.js
を削除する これはlaravel-mixでのみ使用するファイル
package.json
から以下を削除 "cross-env": "^7.0",
"laravel-mix": "^6.0.49",
併せて、最初あたりの記述を以下のファイルの通り書き換えた
vite
をインストール$ npm install vite @vitejs/plugin-vue
関連ライブラリも入れる
$ npm install vue-router@4
現時点では使ってないかも
$ npm install --save-dev laravel-vite-plugin
vite.config.js
を配置する このファイル。
追加で
import vue from '@vitejs/plugin-vue';
と vue()
を記述した resources/js/app.js
の更新 laravel mixのコンパイルと表示が変わり、成功したかも。
今までのstyleが効かなくなった
publicに配置していたcss/jsファイルが機能しない
今まではpublicフォルダに配置していたが、これからはresourcesフォルダで管理する方針になりそう。
なので移行が必要となる
やったこと
public/css/style.css
を resources/css/app.css
にリネーム backend/vite.config.js
にインポートするcssを指定 laravel({
input: [
'resources/css/app.css',
'resources/js/app.js'
],
bootstrap
のファイルをnpmでインストールした npm install bootstrap
新しいbootstrapを入れると崩れるので、
v4.6.0
を指定して入れる。 npm fix --audit
すると最新バージョンに更新されるのでしない。 app.js
でbootstrapをインポートする vite.config.js
で入れたので、bootstrapのインポートはjs側で操作する必要がある// BootstrapのJavaScriptとCSSをインポート
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
bootstrapはこれでOK。
jQueryも入れる
# package.jsonに記載
"jquery": "^3.2",
# jQueryをnpmで入れる
npm install jquery
# app.jsでインポートする
import $ from 'jquery';
// jQuery読み込みテスト
$(document).ready(function() {
console.log('jQuery is working!');
});
これで使えるようになった。
リアクションやストップウォッチのjsファイルはpublicで管理しているため、これらを全てresourceに移行する
jQueryのインポートファイルを調整する
jQueryを使っているのは
reaction.js
だけなので、そこに記述すれば良い。// jQuery読み込み
import $ from 'jquery';
{
document.addEventListener( 'DOMContentLoaded' , function( e ) {
;
....
これで書けるようになる。
viteについて
開発環境では
npm run dev
で開発サーバーを立ち上げ、ホットリロードを有効にさせる本番環境では
npm run build
でビルドファイルを作るという感じある程度動くようになってきた
一旦これで本番にブランチ反映してみる
git checkout -b 240826_vue_upgrade origin/240826_vue_upgrade
# error: Your local changes to the following files would be overwritten by checkout:...
# チェックアウトするとファイルが上書きされるのでコミットかstashしてくれということ。
git add .
git commit -m "commit"
# これでできるようになる
git checkout -b 240826_vue_upgrade origin/240826_vue_upgrade
vue3.4で動いていることが確認できた。
(viteで読み込めること、コンパイルして動いたcss/jsを確認できた)
課題
コンテナでnpmを動かさないようにしないと、環境依存になってしまう
macでは今動くが、windowsではnpmがインストールされていないので動かせないだろう
コンテナにnpmを入れて、読み込めるようにしよう
# appコンテナに入れる
# node.js / npmのインストール
RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
&& apt-get install -y nodejs
docker compose build --no-cache
これで入ったのだろうか
# ver確認
root@ac0f5ea8e514:/var/www/laravel_kirthread# npm -v
10.8.2
root@ac0f5ea8e514:/var/www/laravel_kirthread# node -v
v20.17.0
導入完了。その後コンテナの中に入って
npm install
をすればコンパイラが使えるようになる。