laravel-mixがやっていることを理解する(理解するというか、railsのフロント環境をlaravel-mixで構築してみて、 よくわからないところを整理する)

以下のサボの記事を参考に構築する。(気になったところをメモしていく)

RailsでLaravel Mix(webpack)を使って15分でES6を書きはじめる

qiita.com

webpack.mix.js は何者?

→resources/assets/js/app.jsをコンパイルして、public/js配下に出力してくれるようにしてくれてるやつっぽい。アセットをどのようにコンパイルするか定義してる。

let mix = require('laravel-mix');
mix.setPublicPath('public')
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

if (mix.inProduction()) {
    mix.version();
}

参考情報

Laravel mixは、jsやsassなどのアセットを簡単にいい感じにコンパイルしてくれるビルドツールで、コンパイル対象のファイルを増やしたい時とかは、webpack.mix.jsに書く。

public/mix-manifest.json何者?

→yarn run devコマンドを実行して(package.jsonに定義されてるコマンド npm run dev が実行されて)、アセットファイルがコンパイルされると、public下に作成されてるやつ。このファイルの中身をみると、resource配下のjs/app/jsをコンパイルして、public配下のjs/app.jsを作成したよって意味っぽい(cssも同じ)

$ cat public/mix-manifest.json
{
    "/js/app.js": "/js/app.js?id=2357e5caf066e7a52ea8",
    "/css/app.css": "/css/app.css?id=52caa47f003ce624f239"
}
  • yarn run dev バージョニングされない
  • yarn run prod バージョニングされる とかある。

app/helpers/laravel_mix_helper.rbは、何やってるんだろ?

$ cat app/helpers/laravel_mix_helper.rb
module LaravelMixHelper
  class LaravelMixError < StandardError; end
  MANIFEST_FILE = 'public/mix-manifest.json'

  def mix(path)
    unless File.exists?(MANIFEST_FILE)
      raise LaravelMixError.new('The Mix manifest does not exist. Run `yarn run dev`.')
    end

    manifest = JSON.parse(File.read(MANIFEST_FILE))
    asset_path(manifest[path])
  end
end

このmixメソッドが呼び出される場所は、例えば、以下の$ cat app/views/layouts/application.html.erbとか。laravel_mix_helperは、MANIFEST_FILEがあるかどうかチェックして、なかったらアセットファイルをコンパイルするよう(yarn run dev)、例外が発生するようになってて、MANIFEST_FILEが存在したら、そのファイルを元にコンパイルした後のアセットファイルのパスを返してるっぽい。

$ cat app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>RailsLaravelMix</title>
    <%= csrf_meta_tags %>
    <link rel="stylesheet" href="<%= mix('/css/app.css') %>">
    <script src="<%= mix('/js/app.js') %>"></script>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
    $ cat resources/assets/js/app.js
    require('./bootstrap');
    
    window.Vue = require('vue');
    Vue.component('example-component', require('./components/ExampleComponent.vue'));
    
    const app = new Vue({
        el: '#app'
    });
    

以下の感じに書き換えたら、表示された

$ cat resources/assets/js/app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));

document.addEventListener("DOMContentLoaded", function() {
    const app = new Vue({
        el: '#app'
    });
});

次は、この環境を使って、vuejsを書いてみる。

参考

  • webpack.mix.js って何?追記

qiita.com

Laravel mix事始め

qiita.com