讓 F5 歇一會兒——Laravel-mix 自動重新整理之道

田勇發表於2019-04-14
Laravel

讓 F5 歇一會兒——laravel-mix 自動重新整理之道

轉眼入行已五年有餘，如今已經成長為一個全乾程式設計師。回想起當初使用的一些工具以及工作流，感覺真是笨拙而粗暴，特別是對於瀏覽器重新整理這事兒，只會猛擊 F5，不禁感慨那飽經摧殘的 F5 鍵真是堅挺異常，竟沒有提前掛掉。

隨著踩的坑越來越多，也日漸積累了不少經驗，這其中就包括各種自動重新整理的辦法。因為近幾年來大部分時假在與 Laravel 打交道，使用 laravel-mix 已成家常便飯，所以想著總結並分享一下 laravel-mix 工作流中的自動重新整理之道。

laravel-mix 自稱 An elegant wrapper around Webpack for the 80% use case，其功能確實強大，它對於前端開發工作流的考慮也是非常全面，可以通過 Browsersync、Hot Module Replacement 和 LiveReload 實現自動重新整理。

在接下來的內容之前，需要說明一下我平時使用的環境。
系統為 windows10，前端資源編譯除錯都在宿主機（即 windows10）中完成，而 php, mysql 等由 laradock 容器提供。

我還為此建立了一個演示專案，文中的幾個錄屏動畫也來自該專案，有興趣的可自行克隆檢視原始碼。

Browsersync

Browsersync 是一款強大的前端除錯工具，如它的名字一樣，主要的功能就是“瀏覽器同步”，這裡的同步不僅是當資源發生變化時同步重新整理，它支援區域網中多終端裝置同時除錯，甚至能同步這些裝置上的滾動、點選等操作。此外它還擔任了一個易於使用的 UI 介面（頁面）以及一些外掛，具體資訊可前往官網檢視。

讓 F5 歇一會兒——laravel-mix 自動重新整理之道

  1. 安裝依賴
yarn add -D browser-sync browser-sync-webpack-plugin
  1. 在 webpack.mix.js 檔案中呼叫 mix.browserSync()啟動 Browsersync
/**
 *下面方法啟用 bs，不傳參則使用 laravel-mix 的預設配置
 * 根據實際使用環境配置引數以獲得更好體驗
 * bs 配置選項參考 https://www.browsersync.io/docs/options
 */
mix.browserSync({
  proxy: 'laravel-mix-autoreload-demo.test/',
  startPath: '/demo-bs',
  open: true,
  reloadOnRestart: true,
  watchOptions: {
    usePolling: true,
  },
})
  1. 執行 yarn run watch-poll

如果 Browsersync 的 open 選項設定的為 true，在首次編譯完成之後瀏覽器會自動開啟一個頁面，否則需要手動開啟，預設的是 http://localhost:3000，具體依所設定的 Browsersync 引數而定。

  1. 修改相關檔案關儲存，webpack 將會自動編譯修改的檔案，完成之後頁面將自動重新整理。（如果修改的是後端檔案，則直接重新整理）

讓 F5 歇一會兒——laravel-mix 自動重新整理之道

Hot Module Replacement(hmr)

相信熟悉 webpack 的前端er 都知道 hmr 是什麼。有別於一般的重新整理（即整頁相關資源重新載入），它可以只對發生變化的部分模組進行熱替換，而其它部分保持不變。這使得它不僅反應及時，通常也能保持當前應用狀態不會被重新整理，這對於除錯 SPA 專案十分方便。當然,並不是所有修改它都能進行熱替換，有時也會整頁重新整理。

要在 laravel-mix 中使用 hmr，不需要安裝其它額外的依賴包。

  1. 在 webpack.mix.js 中根據實際場景配置 hmr 引數
// 配置 hmr 引數
mix.options({
  hmrOptions: {
    host: 'laravel-mix-autoreload-demo.test',
    port: 8080,
  }
})
  1. 執行 yarn run hot

首次編輯完成之後，開啟對應的頁面，例如本文提到的示例專案開啟 http://laravel-mix-autoreload-demo.test/demo-hmr

  1. 修改前端資原始檔，愉快擼碼

讓 F5 歇一會兒——laravel-mix 自動重新整理之道

LiveReload

LiveReload 算是一個比較老（維護更新也不勤）的工具了，關於它的詳細介紹請訪問官網。

  1. 安裝依賴 
    
// laravel-mix v4
yarn add -D webpack-livereload-plugin

// laravel-mix v3 或更早
yarn add -D webpack-livereload-plugin@1


2. 在模板的 body 最後加上額外引用的 js

```php
@if(config('app.env') == 'local')
    <script src="http://localhost:35729/livereload.js"></script>
@endif

也可以選擇安裝瀏覽器外掛替代

  1. 執行 yarn run watch-poll

執行該命令以監聽檔案變化並讓 webpack 自動重新編譯。

  1. 開啟頁面，修改頁面引用的前端資源（如 js,css）並儲存，頁面將自動重新整理

因為使用 laravel-mix 編譯，一般修改 resource/ 目錄下的檔案，但實際上直接修改 public/ 目錄中的檔案也是可以觸發重新整理的。

讓 F5 歇一會兒——Laravel-mix 自動重新整理之道

三者對比

Browsersync Hot Module Replacement LiveReload
重新整理方式 修改 css 檔案時為部分替換，其它整頁重新整理 模組熱替換或整頁重新整理 整頁重新整理
監聽範圍 在配置項 files 規則所包含的前後端檔案 前端模組（即 webpack 載入的模組） 瀏覽器當前頁面所載入的前端檔案
速度 修改 css 時較快，其它檔案時一般 快，特別是熱替換時 一般
可靠性 可靠 存在 Bug，但有特殊處理辦法 可靠
使用複雜度 簡單，僅需安裝依賴並呼叫 mix.browserSync() 方法 較複雜，可能需要針對目前存在的 Bug 作特殊處理 較複雜，需要安裝依賴，並在入口模板中手動新增額外 js 引用（或使用瀏覽器外掛）
主要優勢 功能強大，配置靈活，可同時響應前後端檔案變化，適合絕大部分場景 熱替換幾乎實現實時預覽且不響應應用狀態，適合 SPA 專案 相對於其它兩個似乎沒特別優勢（至少目前本人未發現 :smile:）

個人日常使用習慣

因為 Browsersync 的可靠性與廣泛適用性，它通常是我開發時使用的主力工具（甚至我為 hexo 與安裝的 Browsersync 外掛）。

而 hmr 我通常只在除錯 SPA 專案時使用，因為它響應速度快，而且通常不會影響應用狀態，十分方便。但同時需要注意的是 laravel-mix 環境下使用 hmr 也存在一些問題（當前最新版本 4.0.15 中仍存在），例如與 mix.extract()沒法同時使用(見 Issue) 以及在windows 環境中存在的路徑分隔符問題見 Issue，好在這幾個 Issue 裡也給出了這些問題的解決辦法，雖然不甚優雅，但至少行得通。（在前面提到的示例專案裡有相關的程式碼及註釋，可自行查閱）

至於 LiveReload，我完全不會在日常開發中使用。因為相較於其它兩個，它幾乎沒有什麼優勢可言，而且維護情況也堪憂。

總結

前端開發花樣百出，各種技術、框架以及工具層出不窮。作為一個程式設計師，當然不得不學習這些，畢竟生命在於折騰，而前端開發尤其如此。慶幸的是有些折騰也是值得的，它能解救我們（或者解救我們的 F5 鍵 :smile:），例如當你掌握了各種各樣的自動重新整理方法（包括但不限於本文提及的），你會發現自己臨幸 F5 鍵的頻率會越來越低，不知不覺省下來不少時間，可以用來睡覺、逛街、吃雞或者有娃的帶娃……

部落格原文

相關文章