问题表现

点击运行到"Chrome",HBuildX能够正常编译并打开浏览器正常显示网页,这个时候如果去修改代码并保存,HBuildX底部控制台并不会出现重新编译的字样(正常是有的),浏览器也不会自动刷新,同时手动刷新变动的内容也不会生效。运行到APP也是一样的表现。点击重新运行,HBuildX重新编译之后变更的内容会生效。这个问题出现一段时间了,开发起来很不方便,每次都得点击重新运行,严重影响开发效率。网上遇到这个问题的人很少,基本找不到有用的信息。

解决办法

无意中发现webpack在检测文件变动时使用的watchOptions参数,在HBuildX的安装目录上找到相关代码最终定位在安装目录下的“node_modules/@dcloudio/vue-cli-plugin-uni/lib/util.js”(一般是/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/lib下)里面的getWatchOptions函数里面,加一下poll:1000让webpack使用poll方式检测文件变动就恢复正常了。变动如下:

getWatchOptions () {
return {
  poll: 1000, // 这里
  ignored: [
    pathToGlob(path.resolve(process.env.UNI_INPUT_DIR), '*.md'),
    path.resolve(process.env.UNI_INPUT_DIR, '.hbuilderx'),
    path.resolve(process.env.UNI_INPUT_DIR, '.editorconfig'),
    path.resolve(process.env.UNI_INPUT_DIR, '.gitignore'),
    path.resolve(process.env.UNI_INPUT_DIR, 'LICENSE'),
    path.resolve(process.env.UNI_INPUT_DIR, 'unpackage'),
    path.resolve(process.env.UNI_INPUT_DIR, 'uniCloud-aliyun'),
    path.resolve(process.env.UNI_INPUT_DIR, 'uniCloud-tcb'),
    path.resolve(process.env.UNI_INPUT_DIR, 'cloudfunctions-aliyun'),
    path.resolve(process.env.UNI_INPUT_DIR, 'cloudfunctions-tcb')
  ]
}
}

问题复盘

webpack默认使用系统的API对文件变化进行监测(Windows、Linux、macOS上各不同),当监测的文件变动就会对变动的内容进行重新编译和更新。可能是由于某些原因(我最近换了硬盘、升级了操作系统)导致系统监测文件变化的API失效了,也就导致HBuildX不会自动去编译更新了。把getWatchOptions的poll参数设置1000的意思就是,让webpack不要用系统API监测文件变动了,而是每隔1000ms对各个文件进行检测判断是否变动,从而触发编译更新。

至此问题是解决了,但为啥系统的监测文件变动API失效了呢?这个我也不得而知了。


RobinTang
3.9k 声望37 粉丝