かあスレッド_vue導入

関連

npm(Node Package Manager)

jsのパッケージ管理ツール。vue導入の際のプロセス管理に使われる

依存関係を解決してくれる。

まずはこれを入れる

npmの導入

Node.jsと一緒にインストールされるので、npm導入 = Node.jsパッケージの導入から始まる

ローカルに入れてみる

node.jsの導入

homebrewでいれる

code:sh

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

Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.

これはエラーではなく、異なるバージョンが他のバージョンと衝突しないようにPATHにはリンクしてませんよという表記。

昔入れたものと競合する恐れがあるので。

なので、書いているように

ターミナルを再起動。

code:sh

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

code:sh

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

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

確認する

code:sh

# 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

code:package.json

"devDependencies": {

"axios": "^0.19",

...

"vue": "3.4", // これ

"vue-template-compiler": "^2.6.10"

}

コンパイルの不具合

code:log

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を動かしていたので、コンパイラとのバージョンがあってないらしい。

整理する

code:log

npm uninstall vue-template-compiler

npm install @vue/compiler-sfc

もう一回実行したところ、package.jsonに消えたはずのvue-template-compilerが復活していた

これはlaravel-mixが依存関係を解決しようとしてコンパイラを入れているから。

laravel-mixが古い可能性がある。

code:sh

# laravel-mixのバージョンを上げる

npm view laravel-mix version

# 表示されたものをpackage.jsonに書き込む

"laravel-mix": "^6.0.49",

package.lockファイルを削除し、キャッシュなどの問題を一旦考慮しないようにする

これでnpm installすると、jsonに書かれたものが導入される

コンパイルテスト

昔書いたコードが悪さしてるっぽいので、一旦全部消す

exampleだけにしとく

code:webpack.mix.js

mix.js('resources/js/app.js', 'public/js').vue()

// .sass('resources/sass/app.scss', 'public/css')

.version();

ただしこれを行うと画面のレイアウトが崩れる。

code:app.blade.php

{{-- vue.js --}}

<link href="{{ mix('css/app.css') }}" rel="stylesheet">

その他ファイルもまとめてコンパイルしてまとめているのだろうか？

こっちもパッケージを最新にしてみよう

code:sh

npm view sass version

npm view sass-loader version

# で確認して、その値をpackage.jsonに書く→lockファイルを消す→npm install

エラー出なくなった！

実行

https://scrapbox.io/files/66cb56eb8397e1001ca5a036.png

良さそう。

テストコードを書きたい

どちらもフロントエンドのアセットをビルドするためのツール。同時に使用することはない。

laravel mix

webpackをベースとしたビルドツールであり、laravelの公式サポートを受けている

vite

最近の流行り。laravelのバージョンが新しい場合、デフォルトでサポートされている

その他記事:viteディレクティブを使う

これはlaravel-mixでのみ使用するファイル

code:json

"cross-env": "^7.0",

"laravel-mix": "^6.0.49",

併せて、最初あたりの記述を以下のファイルの通り書き換えた

$ npm install vite @vitejs/plugin-vue

関連ライブラリも入れる

$ npm install vue-router@4

現時点では使ってないかも

$ npm install --save-dev laravel-vite-plugin

このファイル。

laravel mixのコンパイルと表示が変わり、成功したかも。

https://scrapbox.io/files/66cc773da78e74001d39faad.png

今までのstyleが効かなくなった

publicに配置していたcss/jsファイルが機能しない

https://scrapbox.io/files/66cc787d62a6ac001d1955b7.png

今まではpublicフォルダに配置していたが、これからはresourcesフォルダで管理する方針になりそう。

なので移行が必要となる

やったこと

code:js

laravel({

input: [

'resources/css/app.css',

'resources/js/app.js'

],

npm install bootstrap

code:app.js

// BootstrapのJavaScriptとCSSをインポート

import 'bootstrap';

import 'bootstrap/dist/css/bootstrap.min.css';

bootstrapはこれでOK。

jQueryも入れる

code:sh

# 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のインポートファイルを調整する

code:js

// jQuery読み込み

import $ from 'jquery';

{

document.addEventListener( 'DOMContentLoaded' , function( e ) {

'use strict';

....

これで書けるようになる。

viteについて

https://scrapbox.io/files/66cc8358a2124c001c0ece9f.png

ある程度動くようになってきた

一旦これで本番にブランチ反映してみる

code:sh

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を入れて、読み込めるようにしよう

code:Dockerfile

# appコンテナに入れる

# node.js / npmのインストール

&& apt-get install -y nodejs

docker compose build --no-cache

これで入ったのだろうか

code:log

# ver確認

root@ac0f5ea8e514:/var/www/laravel_kirthread# npm -v

10.8.2

root@ac0f5ea8e514:/var/www/laravel_kirthread# node -v

v20.17.0