Re: 從零開始的 Laravel SPA 之旅 (一)

Cloud

Published in

Parenting 數位研發

4 min readApr 9, 2018

在我們真正開始實作之前，讓我們先瞭解一下要如何在 Laravel 專案中編譯前端檔案。

在 Laravel 中，我們可以透過 Laravel Mix 提供的 API 來簡單設置 webpack 的建構流程，而不再需要自己去建立 webpack 的設定檔。現在我們就來看看有哪些常用的指令。

＊注意：
在使用 Laravel Mix 之前，請先確定開發環境中有安裝 Node.js 跟 NPM，可以透過以下指令來確認：

# 確認是否有安裝 Node.js
node -v# 確認是否有安裝 NPM
npm -v

前端檔案編譯

要進行前端的 js 跟 css 檔案編譯時，我們只需要執行 package.json 當中的 NPM 腳本指令即可，現在我們就來看看幾個比較常用的指令：

# 進行檔案的編譯 （使用於開發或是測試階段）
npm run development# 進行檔案的編譯，並且會持續監聽，當檔案進行修改時，會自動重新編譯（開發使用）
npm run watch# 跟上述的 watch 相同，但是在檔案變更時，還會自動重新渲染瀏覽器畫面（開發使用）
npm run hot# 進行檔案的編譯並且壓縮 （使用於正式部署）
npm run production

開發過程中推薦使用 “npm run hot”。當我們編輯檔案後，它會自動幫我們重新渲染瀏覽器的畫面，從此跟“重新整理”講掰掰。

JavaScrip 檔案編譯設定

Laravel Mix 提供了一個 js 方法，讓我們可以簡單的設定檔案的編譯方式。只要使用這個 js 方法，就會提供 es2015 以及 .vue 檔的編譯。在正式環境下，也會將檔案壓縮與最佳化。

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

SAAS 檔案編譯設定

在 saas 的編譯設定中，Laravel Mix 也有提供 saas 方法，使用方式跟上述的 js 方法類似。

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

避免瀏覽器 Cache

當我們更新前端檔案後，為了避免瀏覽器仍然使用舊版本的檔案，我們可以使用 version 方法來解決。通常在正式發布後才需要處理這個問題，所以我們可以增加一個是否為正式環境的判斷式，範例如下：

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

設定完成後，我們也必須使用 Laravel Mix 提供的 mix 方法來獲得前端檔案的路徑。

<link rel="stylesheet" href="{{ mix('css/app.css') }}"><script src="{{ mix('js/app.js') }}"></script>

環境變數

在開發 Laravel 專案中，若是我們需要根據環境設置不同的變數，我們可以在 .env 檔案中設置我們的環境變數。在 Laravel Mix 當中，我們一樣可以在 .env 當中設置我們的環境變數，只要在變數加上 MIX_ 的前綴，就會將變數注入到 Laravel Mix 當中，範例如下：

MIX_SENTRY_DSN_PUBLIC=http://example.com

在 .env 當中設置好環境變數後，我們可以透過 process.env 的物件來獲得 Mix 環境變數。

process.env.MIX_SENTRY_DSN_PUBLIC

在這一篇文章中，我們簡單認識了 Laravel Mix，如果想要更加深入的話，可以前往 Laravel 的官方文件。在下一篇文章中，我們將開始建立 SPA 網站。