More than 5 years have passed since last update.

laravelにVue.jsを入れる前の、5分間の事前学習

Last updated at 2019-05-12Posted at 2019-05-07

◆コンパイル

ソースコードを機械語に変換する

バグがないことを確かめて(静的解析)、問題がなければ実行できる形のファイルに組み立てること
(プリプロセッサ：定数置き換え・コメント削除などコンパイル前の準備)　このあとコンパイル。
コンパイルはビルドの中に含まれる

cssの機能を拡張した言語(効率よくかける)
scssも同様
sassはインデントで分けて、scssはcssと書き方は同じだがこちらもインデントで分ける

サーバーサイドで使えるJavaScriptの代表的なものの一つ
クライアントもサーバーサイドもJavaScriptで書ければ楽ということが利用される最大の理由

node.jsのパッケージ管理ツール
node.jsのパッケージは用意された便利機能の集まり

複数javaScriptのファイルがあり、またそのファイルごとに依存関係がある(なくてももちろんいい)場合でも、それを解決し、
一つのファイルにまとめてくれる機能(ビルド)
laravelのwebpack.mix.jsファイルを見てみると、

let mix = require('laravel-mix');

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

resources/assets/js/app.jsがビルドしたいファイル
public/jsが出力先
ほかにも指定したいものがあれば、どんどん指定できる。

laravelにvue.jsを導入するときに使うと、思うのですが、これで先ほどwebpack.mix.jsで指定した内容をビルドして、出力してくれる。

バージョン付けしたファイルの最新の名前を自動的に解決

mix.js('resources/assets/js/app.js', 'public/js')
   .version();

npm run devで出力されているため、asset('js/app.js')でも参照できる。バージョン管理がない場合はassetでいいと思います
参考記事

webpackをラップして、vueファイルをコンパイルする際に標準デフォルト設定も渡す