Ember CLIカスタムCMS設定でのビルド

Question

ビジネス上の問題：一連のEmberアプリケーションでは、ソフトウェアの白/灰色のラベル付けをサポートするために、色、ロゴ、特定のコンテンツをCMSが制御できるようにします。

提案された解決策：Ember CLIアドオンが作成され、ビルド時に適切なスタイルシートルール、ロゴURLなどが取得され、適切なツリーにコンテンツが挿入されます。アドオンのため

初期の実装：

// index.js 
/* jshint node: true */ 
'use strict'; 

const BroccoliMergeTrees = require('broccoli-merge-trees'); 
const broccoliSource = require('broccoli-source'); 
const UnwatchedDir = broccoliSource.UnwatchedDir; 
const apiFactory = require('./lib/cms-integration-addon/api.js'); 
const writeFile = require('write'); 

module.exports = { 
    name: 'cms-integration-addon', 
    cmsIntegrationConfig: {}, 
    isDevelopingAddon() { 
    return true; 
    }, 

    included(app) { 
    const config = app.project.config(app.env)['cms-integration'] || {}; 
    this.cmsIntegrationConfig = config; 
    }, 

    treeForAddon() { 
    let tree = this._super.treeForAddon.apply(this, arguments); 

    const cmsDetailsSource = new UnwatchedDir(this.app.project.root + '/tmp/cms-integration-addon'); 
    tree = new BroccoliMergeTrees([tree, cmsDetailsSource]); 

    return tree; 
    }, 

    preBuild() { 
    const cms = apiFactory(this.cmsIntegrationConfig); 
    return cms.fetchSettings().then((settings) => { 
     const configPath = `${this.app.project.root}/tmp/cms-integration-addon/config/my-config.js`; 

     return writeFile(configPath, `export default ${JSON.stringify(settings)}`); 
    }); 
    } 
}; 

問題は、私が期待するように、このコードでCMSから適切なJSONオブジェクトがcms-integration-addonモジュールの下vendor.jsに挿入されないということです。 treeForAddonをtreeForAppに変更すると、設定オブジェクトはアプリのモジュールのapp-name.jsに挿入されます。これは理想的ではなく、このコードがアドオンのモジュールの下に注入されている方が良いでしょう。

私のJSONオブジェクトをアドオンのモジュールに挿入するには、何が欠けていますか？

Answer 1

treeForAppの注入が許可されているが、その他のtreeFor*のメソッドでは、ビルド時にアドオンにコードを適切に注入する方法を判断できませんでした。上記の例を使用すると、ember-cli-build.jsに新しいapp.import()コールが追加されるとともに、いくつかの変更が行われる必要があります。

1. 変更vendor/代わりのtmp/の下で生活するJSONオブジェクトの出力パス。 Ember CLI documentationによれば、bower_componentsとvendorの下にあるファイルのみをアプリにインポートできます。

2. vendor/ディレクトリに実際のファイル出力を変更し、define()を使用してAMDフォーマットに準拠させます。あなたはvendor.jsファイルに注入され、適切なオブジェクトが表示されるはずですし、あなたが呼び出すことによって、それを使用することができます。この時点で、

   app.import('vendor/cms-integration/config/my-config.js');

：

は、あなたのember-cli-build.jsファイルに次の行を追加します。

import CmsSettings from 'cms-integration/config/my-config';