如何将其他Ember应用集成到现有项目？及Ember CLI插件集成求助

咱们先聚焦你当前遇到的ember-cli-barcode插件集成问题，这应该是最紧急的，之后再聊如何整合其他Ember应用。

一、搞定ember-cli-barcode插件集成 #

你的核心矛盾在于Ember CLI 1.12的版本兼容性：这个老版本的CLI对Node版本的支持范围是0.12.x到4.x LTS，你直接跳到Node 7.x太新了，会和老依赖产生各种冲突。按下面的步骤来：

1. 切换到兼容的Node版本 #

建议用Node 4.9.1（LTS稳定版），既满足插件要求的Node≥4，又和Ember CLI 1.12完美兼容：

• 如果你用nvm管理Node版本，执行：

  nvm install 4.9.1
  nvm use 4.9.1
  

• 没有nvm的话，直接下载对应版本的安装包替换即可。

2. 清理旧依赖避免残留冲突 #

把之前可能损坏的依赖文件全删掉：

rm -rf node_modules bower_components
rm package-lock.json bower.lock  # 这两个文件如果存在的话也删掉

3. 重新安装项目基础依赖 #

先确保项目本身的依赖能正常安装：

npm install
bower install

4. 正确安装并配置插件 #

Ember CLI 1.12的ember install:npm命令还不够完善，咱们用npm手动安装再配置：

npm install ember-cli-barcode --save-dev

然后打开项目根目录的Brocfile.js（1.12版本还没用到ember-cli-build.js），添加插件资源的导入：

// Brocfile.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();

// 导入插件的核心JS文件，路径可能需要根据插件实际结构调整，如果插件是CLI兼容的，也可能自动处理
app.import('vendor/barcode-js/dist/barcode.min.js');

module.exports = app.toTree();

如果插件需要配置项，打开config/environment.js添加：

// config/environment.js
module.exports = function(environment) {
  var ENV = {
    // ... 你的其他配置
    'ember-cli-barcode': {
      // 这里填插件需要的配置，比如默认条码格式等（如果有的话）
    }
  };
  return ENV;
};

5. 启动项目验证 #

最后执行：

ember server

如果还有错误，看终端里的具体提示——比如某个依赖缺失，就手动用npm install [依赖名] --save-dev补上就行。

二、把其他Ember应用集成到现有项目 #

根据你的需求，有三种常用方案：

1. 静态资源嵌入（简单粗暴，适合独立子应用） #

• 先把要集成的Ember应用打包成静态文件：执行ember build --environment production，得到dist文件夹。
• 在主项目的public目录下建个文件夹（比如sub-app），把dist里的所有内容复制进去。
• 在主项目里加一个路由（比如/sub-app），对应的模板用<iframe>加载子应用：

  {{!-- app/templates/sub-app.hbs --}}
  <iframe src="/sub-app/index.html" width="100%" height="100%" frameborder="0"></iframe>
  

  优点：子应用完全独立，不影响主项目；缺点：两个应用状态不共享，用户体验有割裂感。

2. Ember Engine集成（官方推荐，适合深度整合） #

这是Ember官方的模块化整合方案，但你的主项目是Ember CLI 1.12，不支持Engine——Engine在Ember CLI 2.10之后才稳定。如果能升级主项目的CLI版本，可以这么做：

• 把要集成的应用改造成Ember Engine。
• 在主项目里安装这个Engine作为依赖。
• 在主项目的router.js里挂载Engine的路由：

  // app/router.js
  import Ember from 'ember';
  import config from './config/environment';
  
  const Router = Ember.Router.extend({
    location: config.locationType,
    rootURL: config.rootURL
  });
  
  Router.map(function() {
    this.mount('你的-engine-name', { path: '/sub-app' });
  });
  
  export default Router;
  

  优点：应用间可以共享路由、服务、组件，体验流畅；缺点：需要升级主项目，改造子应用的成本高。

3. 代码复用（适合小范围功能整合） #

如果不需要完整子应用，只是复用部分组件、路由，直接把另一个应用里的对应代码复制到主项目，调整依赖和路径，确保能正常编译就行。优点是灵活，缺点是代码冗余，维护成本高。

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