Laravel Mix2をLaravel Mix4へアップグレードする

はじめに

Laravel Mix 4が正式にリリースされたっぽいのでアップグレードしました。

前提

既存の資源を使ったまま上げる。
つまり、dart-sassとかいうのがデフォルトで使えるようになったらしいけど、
そういうデフォルトなものを変えると、システムのコードルール的な部分が変わってしまうので、
そういうのは既存のまま動かすようにします。

公式通りにやればOKだけど、やったよ！の証跡を残すために書いときます。
https://laravel-mix.com/docs/4.0/upgrade

バージョン

一応以下の組み合わせで作成済のモノがしっかりと動くことを確認しました。

• Laravel 5.7
• Vue 2.5
• vee-validate 2.1.4
• vue-i18 8.5
• vuex 3.0
• bulma 0.7.2
• buefy 0.7.1

Laravel Mix 4になると何が嬉しいのか

• Webpack4が使える
• vue-loader 15が使える
• Babel 7が使える

つまり、jsのテストがやりやすくなる。
というか、今までwebpack3でのセットアップの仕方が判らなくて投げだしてた

アップグレード方法

Vueコンポーネントの読込み方法変更

• アップグレード前

Vue.component(
    'example-component', 
    require('./components/ExampleComponent.vue')
);

• アップグレード後

Vue.component(
    'example-component', 
    require('./components/ExampleComponent.vue').default
);

node-sassを使うようにする

dart-sassがデフォルトで使われるようになっているので、
node-sassに切り替える必要があります。

npm install -s node-sass sass-loader

• アップグレード前

mix.sass('resources/sass/app.sass', 'public/css');

• アップグレード後

mix.sass('resources/sass/app.sass', 'public/css', {
    implementation: require('node-sass')
});

おわりに

とりあえず、自分の手元の環境でアップグレードが済んだので、アップグレード報告しました。
前提が異なればやり方も変わるとは思いますが、
Laravelの環境でも簡単にwebpack4が使えるようになったのはとても有難いです。

とりあえず速攻でjsのテストコードを書ける環境を作ろうと思います。