Ember-Engines开发流程及代码修改无热重载问题解决方案咨询

作为长期搞Ember开发的人，我先给你梳理下标准的Ember-Engines开发流程，帮你建立整体认知：

• 初始化引擎项目：用Ember CLI直接生成引擎骨架，运行命令 ember engine <your-engine-name>。生成的项目里，addon/目录是引擎的核心代码区（路由、组件、服务这些都在这里写），app/目录则是用来把引擎里的内容暴露给宿主应用的出口。
• 开发引擎核心功能：和开发普通Ember Addon逻辑类似，但要注意引擎的隔离性——比如引擎的路由是独立的，服务默认也不会和宿主共享，需要显式配置。你可以在addon/routes/、addon/components/里写业务代码，和平时写Ember应用没太大区别。
• 配置暴露规则：在项目根目录的engine.js里，你需要定义引擎要暴露给宿主的内容，比如路由（routes字段）、可复用的组件/服务（exports字段）。另外package.json里的ember-addon配置也要同步好，确保宿主能正确识别这是一个引擎。
• 本地关联宿主测试：这一步就是你遇到痛点的地方，后面我会专门讲优化方法，常规操作是用npm link或者yarn link把本地引擎关联到宿主应用，避免每次都要发布安装。
• 集成到宿主应用：在宿主应用里安装引擎（关联本地包或者从npm拉取），然后在宿主的router.js里通过this.mount('<your-engine-name>', { path: '/your-mount-path' })挂载引擎的路由，这样用户访问对应路径就能加载引擎内容了。
• 测试与调试：启动宿主应用的ember serve，就能测试引擎的功能。调试的时候用Ember Inspector可以区分引擎和宿主的上下文，方便定位问题。
• 发布上线：开发完成后，运行ember build打包引擎，然后发布到npm（或者私有仓库），宿主应用就可以直接安装正式版本了。

你遇到的这个问题确实很影响效率，我给你几个实际项目里常用的优化方案：

• 本地关联 + 实时构建

  1. 先在引擎目录运行 npm link，然后在宿主应用目录运行 npm link <your-engine-name>，把本地引擎关联到宿主（不用每次npm install）。
  2. 在引擎目录启动实时构建：ember build --watch。这样你修改引擎代码后，会自动重新构建引擎的dist/目录，宿主应用会检测到关联包的文件变化，触发live reload。
  3. 如果宿主应用没自动重载，可以在宿主的ember-cli-build.js里添加配置，强制开启文件监听：

     const app = new EmberApp(defaults, {
       watcher: 'polling', // 针对某些文件系统监听不灵敏的情况
     });
     

• 使用ember-cli-addon-dev工具
  这个工具是专门为Ember Addon/Engine开发打造的，能帮你自动处理构建和热重载：

  1. 在引擎目录安装依赖：npm install ember-cli-addon-dev --save-dev。
  2. 在引擎的package.json里添加启动脚本：

     "scripts": {
       "start": "ember-cli-addon-dev start"
     }
     

  3. 用npm link关联到宿主后，在引擎目录运行npm start，它会自动监听代码变化、实时构建，并且通知宿主应用触发重载，体验和开发普通Ember应用几乎一样。

• 直接在宿主package.json指定本地路径
  如果你觉得link操作麻烦，可以直接在宿主的package.json里把引擎的依赖指向本地路径：

  "dependencies": {
    "<your-engine-name>": "file:../path/to/your-engine"
  }
  

  然后运行npm install，宿主会直接使用本地引擎文件。配合引擎的ember build --watch，同样能实现修改后自动重载的效果。

另外要注意，如果你用的是较新版本的Ember CLI，某些配置可能已经默认支持本地包的热重载，你可以先试试只开引擎的watch构建，看宿主会不会自动重载，不行再加上面的配置。

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