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 时老是磕磕绊绊(有很多坑），但一旦掌握了窍门，就能极大的方便平常开发，提升工做效率。博客里记下这些，权当备忘，也算是分享，独乐不如众乐。