运行npm run watch时Hyperapp app.js无法同步至浏览器页面，求解决方案

嘿，我之前也碰到过类似的Hyperapp+Parcel热更新失效的情况，结合这个starterkit的配置，给你几个靠谱的解决方向：

• 修复热模块替换（HMR）的配置
  这个脚手架用的是Parcel打包工具，大概率是HMR没有正确适配Hyperapp导致的。先装个Hyperapp专用的热替换插件：

  npm install hyperapp-hmr --save-dev
  

  然后修改你的app.js入口，把HMR集成进去：

  import { h, app } from 'hyperapp'
  import { withHMR } from 'hyperapp-hmr'
  
  // 保留你原本的state、actions、view定义
  const state = { /* 你的状态 */ }
  const actions = { /* 你的动作 */ }
  const view = (state, actions) => h('div', {}, /* 你的视图内容 */)
  
  // 用withHMR包裹app实例
  const main = withHMR(app)(state, actions, view, document.body)
  
  // 启用模块热替换
  if (module.hot) {
    module.hot.accept()
  }
  

  重启npm run watch，再改改app.js试试，应该能正常同步了。

• 清空Parcel的缓存文件
  Parcel的缓存有时候会抽风，导致新修改的代码没被打包。删掉项目根目录下的.parcel-cache文件夹，然后重新启动watch服务：

  # Mac/Linux
  rm -rf .parcel-cache
  # Windows
  rmdir /s /q .parcel-cache
  npm run watch
  

• 排查JS文件的语法错误
  从你提供的控制台报错来看，是某个模块解析失败了——这种情况下CSS能正常加载，但JS bundle会因为错误卡住，没法更新。你可以用ESLint检查下app.js和相关JS文件的语法问题：

  npx eslint app.js
  

  把检测出来的语法错误都修复了，再重启watch进程试试。

• 降级Parcel到脚手架指定的版本
  如果你之前升级过Parcel依赖，可能新版本和这个旧版starterkit不兼容。看看package.json里devDependencies下的parcel-bundler版本号，重新安装对应版本：

  npm install parcel-bundler@[原版本号] --save-dev
  

  比如原版本是^1.12.4，就装parcel-bundler@1.12.4，然后重启服务。

• 禁用浏览器缓存
  有时候浏览器会死死缓存旧的JS文件，导致你看不到更新。打开开发者工具（F12），切换到Network面板，勾选「Disable cache」选项，刷新页面后再修改app.js，看看能不能同步。

内容的提问来源于stack exchange，提问作者Joseppi