讓 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 界面（頁面）以及一些插件，具體信息可前往官網查看。

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 將會自動編譯修改的文件，完成以後頁面將自動刷新。（若是修改的是後端文件，則直接刷新）

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. 修改前端資源文件，愉快擼碼

LiveReload

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

1. 安裝依賴

// laravel-mix v4
yarn add -D webpack-livereload-plugin

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

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

@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/ 目錄中的文件也是能夠觸發刷新的。

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

我的平常使用習慣

由於 Browsersync 的可靠性與普遍適用性，它一般是我開發時使用的主力工具（甚至我爲 hexo 與安裝的 Browsersync 插件）。

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

至於 LiveReload，我徹底不會在平常開發中使用。由於相較於其它兩個，它幾乎沒有什麼優點可言，並且維護狀況也堪憂。

總結

前端開發花樣百出，各類技術、框架以及工具層出不窮。做爲一個程序員，固然不得不學習這些，畢竟生命在於折騰，而前端開發尤爲如此。慶幸的是有些折騰也是值得的，它能解救咱們（或者解救咱們的 F5 鍵 ），例如當你掌握了各類各樣的自動刷新方法（包括但不限於本文說起的），你會發現本身臨幸 F5 鍵的頻率會愈來愈低，不知不覺省下來很多時間，能夠用來睡覺、逛街、吃雞或者有娃的帶娃……

博客原文