樹脂が固まる前に

WebフロントエンドとAndroidを主にいじっている人のメモ

Laravelでプロジェクト作って,VueでHMRするまで

背景

バイト先で自分はReactを書いていたんだけど,これからはVue使うことになったらしい

ハンズオンしてほしいって頼まれたけど,Vueほぼやったことなかったので,基本的な使い方とかWebpackとの連携とかを半日ぐらい勉強した

よし資料作るかってなったら,そういえばバイト先PHP使ってること思い出して,これはLaravelとLaravel-Mix使うやつやんと気付く

ハンズオンで学んだ内容でそのままスムーズに移行できるように,Laravelを立ち上げて触ってみることにしたけど,何回か躓いたので備忘録

環境

Laravelでプロジェクト作成

PHPとComposerを入れる

各々,公式サイトから落としてくる(てか入ってなかったんか...)

パスを通しておく

Laravel入れる

composer global require "laravel/installer=~1.1"でグローバルにLaravelいれる

これでLaravelコマンドが使えるようになった

プロジェクトを作って依存パッケージを入れる

laravel new xxxx でプロジェクトフォルダ(xxxx)作る

xxxx 内で composer install して依存パッケージを入れようとするが,上手くいかない

これは,composer.lockcomposer.json に書かれたパッケージのバージョンが違うためらしい

composer updateでうまく行った

今後はこれを基本的に使えば良さそう

Laravel起動

php artisan serveしてサーバを起動!動いた

localhost:8000にブラウザでアクセスするも,Whoopsって表示されてる...

あ~.envファイルをコピーする必要があるんだった

PowerShellcp .env.example .envした (ちなみにPowerShellだとcp -p .env.example .envは動かなかった)

気を取り直して,php artisan serveしたら動いた🎉

f:id:pvcresin:20190203185142p:plain

今回使うフォルダたち

  • resources/
    • js/: Vueのファイルも入ってる
      • components/
        • ExampleComponent.vue
    • sass/: SCSSファイルが入ってる
    • views/: テンプレートのPHPファイルが入ってる
      • welcome.blade.php
  • public/: 最終的にServeされるファイルが入ってる(出力されてる)
  • routes/: ウェブページやAPIのルーティング周りが書かれている
    • web.php
  • webpack.mix.js

CSRFトーク

コンソールでCSRFトークンの記述ねえぞって怒られてるから,welcome.blade.phpheadタグ内に

<meta name="csrf-token" content="{{ csrf_token() }}">

書いておく

Vue動かす

準備

  • Chrome拡張のVue.js devtools
  • VSCodeの設定でformatOnSavetrueにする
  • VSCode拡張の以下2つを入れる
    • Prettier: いろんな形式のファイルを自動フォーマットする君
    • Vetur: Vueファイルをいい感じに表示したりする君
  • xxxx内でyarnして依存モジュールを入れる

npm-scripts

package.jsonを見ると,主なコマンドは以下の4つ

  • prod: 1回productionビルド
  • dev: 1回developmentビルド
  • watch: ファイルが更新されるたびにdevelopmentビルド(ブラウザリロード必要)
  • hot: HMR.ファイルが更新されるたびにdevビルド(ブラウザリロード不要)

Routingを変えてみる

viewsindex.blade.phpを作成

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Laravel</title>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
  </head>
  <body>
    <div id="app">
      <example-component></example-component>
    </div>
    <script src="{{ mix('js/app.js') }}"></script>
  </body>
</html>

routes/web.php内に,ブラウザで/にアクセスした時,welcomeのテンプレートを返すことが書かれてるので,indexに変更する

Route::get('/', function () {
    return view('index');
});

もう一度サーバを起動してアクセスし直すとindex.blade.phpの内容が表示されてる

開発してみる

とりあえずyarn watchしてみる

resources/js/components/ExampleComponent.vueを編集すると,自動でビルドされる

ブラウザをリロードするとコンポーネントが更新されている

f:id:pvcresin:20190203185520p:plain

これで開発はできそう

HMR(Hot Module Replacement) する

yarn hotしてみたけど,.vueファイル変更保存しても反映されない!

調べたら,なんかIssueたってた

LaravelとVueを連携するためにLaravel-Mix(Webpackのラッパー)で通信してるけど,そこの連携がうまく行ってないっぽい

webpack.mix.jsに以下を追記

Mix.listen('configReady', webpackConfig => {
    if (Mix.isUsing('hmr')) {
        // Remove leading '/' from entry keys
        webpackConfig.entry = Object.keys(webpackConfig.entry).reduce(
            (entries, entry) => {
                entries[entry.replace(/^\//, '')] = webpackConfig.entry[entry]
                return entries
            },
            {}
        )

        // Remove leading '/' from ExtractTextPlugin instances
        webpackConfig.plugins.forEach(plugin => {
            if (plugin.constructor.name === 'ExtractTextPlugin') {
                plugin.filename = plugin.filename.replace(/^\//, '')
            }
        })
    }
})

もう一回yarn hotしてブラウザで開いたらコンソールでHMRが有効化されていることが確認できた

.vueファイルを変更して保存すると,ブラウザのリロード無しで反映されるようになった🎉

とりあえず最低限は動いてるかな

HMRが動いたので今日はここまで