Homestead + laravel-mix 環境下 hmr 的兩種玩法

博客原文

我在前幾天剛寫過的《讓 F5 歇一下子——laravel-mix 自動刷新之道》中介紹了 laravel-mix 實現自動刷新的幾種方法，其中就有涉及 hmr（Hot Module Replacement），但裏面都是以 Laradock 環境爲例。對於 Laravel 官方首推的 Homestead 固然也是能夠的，只不過用法上有些差異，於加上 laravel-mix 自己的一些 BUG（在 issue 裏搜索 hmr 結果就有好幾頁 ），對於剛接觸的人來講可能無從下手。

本文介紹兩種不一樣的玩法。

首先假定你已經建立了一個 laravel 項目，進行了相關配置（.env 配置及綁定測試域名，如：laravel.test）並已裝好了後端依賴

玩法一：使用虛擬機中的 Node 環境

由於 Homestead 提供的環境裏默認包含了前端開發所須要的 Node 環境及相關工具（gulp, npm, yarn 等），因此直接使用它們彷佛是很省事的選擇。

1. vagrant ssh 鏈接虛擬機，進入項目目錄後安裝前端依賴

   yarn install

2. 在 webpack.mix.js 中調整相關配置

   • 使用 mix.Webpack() 配置 devServer

     mix.webpackConfig({
         devServer: {
             watchOptions: {
                 poll: 2000, // 這個值可調整，性能高的時候能夠調小，也能夠直接設置爲 true
                 ignored: /node_modules/,
             },
         },
     })

> 這一配置很關鍵，由於要是僅使用 devServer 的默認 watch 選項，對於虛擬機環境是無效的（[見 webpack 文檔](https://webpack.js.org/configuration/watch/#watchoptionspoll)）

- 調整 hmrOptions

    ```js
    mix.options({
        hmrOptions: {
            host: 'laravel.test',
            port: 8080
        }
    })
    ```

1. 在虛擬機終端中執行yarn run hot，而後在瀏覽器中使用綁定的測試域名（如：laravel.test）訪問
2. 修改 JS 等，自動編譯後瀏覽器中頁面即自動更新

玩法二：使用宿主機中的 Node 環境

固然也可使用宿主機的 Node 環境，對於開發都來講，這些環境應該也是必須的了。

1. 從宿主機終端進入項目目錄並安裝前端依賴

   yarn install

2. webpack.mix.js 中使用 webpackConfig 進行配置

   mix.webpackConfig({
       devServer: {
           disableHostCheck: true,
       },
       // 其它配置
   })

   disableHostCheck: true 是爲了不出現下面這種錯誤。

   與玩法一中不同，再也不須要特別在 hmrOptions 中指定 devServer 和 host 和 port，使用默認的就好（事實上也 不能像前面那樣指定，由於會出現 IP/端口 衝突）

3. 在宿主機終端中執行yarn run hot，而後在瀏覽器中使用綁定的測試域名（如：laravel.test）訪問
4. 修改 JS 等，自動編譯後瀏覽器中頁面即自動更新

總結

兩種方法並無誰好誰壞之分，具體使用哪一種方法視具體場景及我的喜愛而定。就我我的而言，一般使用第二種，主要緣由有二：

• 一是出於性能/延遲方面的考慮，由於在虛擬機中使用輪詢（poll）的方式來監聽文件變化，當 poll 設置間隔較大時可能會出現必定延遲，而設置過小輪詢太頻繁則又可能形成必定的性能壓力。因此直接使用宿主機的 Node 環境彷佛更爲划算。
• 二是本身使用的 IDE（PhpStorm）運行在宿主機（Windows）中，而 PhpStorm 的一些插件（或服務）如 Eslint、TypeScript、 Prettier 須要使用使用本地安裝的一些 npm 包，這樣就只能在宿主環境裏安裝依賴。（雖然能夠考慮在宿主機全局安裝依賴，但諸如 eslint-config-xxx 之類的項目相關的包也全局安裝，必然形成混亂）

如同窗習不少其它新工具新玩法同樣，剛開始折騰 laravel-mix 時老是磕磕絆絆(有很多坑），但一旦掌握了竅門，就能極大的方便平常開發，提升工做效率。博客裏記下這些，權當備忘，也算是分享，獨樂不如衆樂。