Zenn
🙂

【laravel】laravel mixを使ってみる

2021/01/13に公開
Laravel
PHP
Laravel Mix
tech

初書：2021/1/13
laravel : v8.21.0
php : 7.4.14

接続用リンク：素のPHPしか触ってなかった人がlaravelを触ってみる - Qiita

laravel mixとは

Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。 - Qiita

つまり、jsやcssをコンパイルして、本番環境でも使いやすくするよ、みたいなやつ（適当）

インストール

laravalの場合はnpmをインストールするだけ。

% npm install

javascriptを書いていく

とりあえずファイルがなければ話にはなりません。
作成するファイルはresources/assets/以下に置く
laravel mixではtypescriptも扱えるようなので、せっかくなのでtypescriptも勉強してみる
（タイトルと盛大に矛盾）

resources/assets/ts/test.ts
let str: string = "this is a test";
const doc: HTMLElement | null = document.getElementById("tes");

if(doc){
    doc.innerHTML = str;
}

#tes要素の中身をthis is a testにするだけ。

typescriptの設定

これは先ほどtypescriptを書いた場合のみ必要。javascriptを書いた場合は不要

後にコンパイルする際に、多少設定が必要なので、先に設定

% tsc --init

tsc --initを実行し、tsconfig.jsonを作成
ファイルを開き、以下を書き換え（任意）

tsconfig.json
-"target": "es5",
+"target": "es2020",

tsconfig.jsonのより詳しい設定：
tsconfig.jsonの全オプションを理解する（随時追加中） - Qiita

コンパイルしてみる

コンパイルする前に、一つ準備が必要
まずはwebpack.mix.jsを開く
以下の行を追加する

webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .ts('resources/ts/test.ts', 'public/js') // <-この１行を追加
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

記述できれば以下を実行

% npm run dev
(長い出力)
✔ Compiled Successfully in 3625ms

（ちなみに本番環境向けはnpm run production。これで圧縮もされる）

最後にCompiled Successfullyと出力されれば完了。public/js/test.jsにファイルが出来ているはず

実際に出力してみる

あとはblade.phpで出力するだけ。

resources/views/test.blade.phpを作成し、以下を記述

resources/views/test.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>テスト</title>
    </head>
    <body>
        <div id="tes"></div>
        <script src="{{ mix('js/test.js') }}"></script>
    </body>
</html>

同様にroutes/web.phpの最後の行に以下を記述

routes/web.php
// 前略
Route::get('/test', function () {
    return view('test');
});

表示してみる

http://127.0.0.1:8000/testにアクセスしてみると、This is the testが表示されている。

終わりに

一度やってみると分かるが、一度やるまでが難しいLaravel。慣れるまでまだまだ時間がかかりそう・・・。
（ところで、laravelの投稿にphpのタグを含めるのは適切だと思いますか・・・？）

続き？：【laravel】laravel mixのwebpack.mix.jsの書き換えを省略したい！

参考サイト：

Laravel Mixでフロントエンド開発環境を手軽に構築　2020年版 作業環境を晒します〜フロントエンド開発環境編〜 - arms inc. Engineers' Blog

Discussion