ember-cli 和 Ember 插件依赖链中的 contentFor 方法
ember-cli and the contentFor method in an Ember Addon dependency chain
我的问题是当此插件用于另一个插件的依赖项时,我无法在 运行 的插件中获取 contentFor 方法(我知道很困惑)。
我的组织有一个内部 ember 插件,我们用它来为我们的 ember 应用程序分发通用样式、图像和组件。我将该插件称为 org-components
。我们决定采用 material 设计,因此我们选择将 ember-paper 与我们现有的插件一起使用。
为了减少人们在摄取应用程序中需要引用的依赖项数量,我们更愿意将 ember-paper
作为 org-components
的依赖项(而不是 devDependency
).
因此我们的依赖链是这样的:
ember-paper -> org-components -> ember-engine
ember-paper
在 ~/index.js
中定义了一个 contentFor
方法,它将为 Material 图标和头部的字体和 paper-wormhole
注入几个样式表分成 body-footer
以供 select 菜单下拉菜单和 toast 消息使用。由于我不知道的原因,当 ember-paper
被包含为依赖项时,contentFor
方法不会执行,如上所示。
当我将两个组件作为单独的依赖项包含时,contentFor
方法将被执行并且一切如预期的那样工作:
ember-paper -> ember-engine
org-components -> ember-engine
所以我想了解为什么当 ember-paper
插件用作我们现有插件的依赖项时我无法利用它。是什么阻止了 contentFor 构建步骤的执行?在尝试解决此问题时,他们是我应该牢记的最佳实践吗?
感谢 Ember 团队的 Robert Jackson,我最终找到了解决这个问题的方法。
在 Ember Slack 社区寻求帮助后,Robert 让我意识到 ember-engines 中现有的 contentFor
功能尚未扩展以处理此用例.他承认这是一个疏忽,他们很可能会在未来添加该功能,但目前他为我提供了一个解决方法以添加到 /lib/engine-addon.js
.
options.contentFor = function(type, config) {
let deprecatedHooks = ['app-prefix', 'app-suffix', 'vendor-prefix', 'vendor-suffix'];
if (deprecatedHooks.indexOf(type) > -1) {
// ember-engines does not support the deprecated contentFor hooks
return '';
}
let content = [];
if (type === 'head') {
let engineConfig = this.engineConfig(config.environment, {});
let escapedConfig = escape(JSON.stringify(engineConfig));
content = content.push(
`<meta name="${options.name}/config/environment" content="${escapedConfig}" />`
);
}
content = this.addons.reduce((content, addon) => {
let addonContent = addon.contentFor ? addon.contentFor(type, config, content) : null;
if (addonContent) {
return content.concat(addonContent);
}
return content;
}, content);
return content.join('\n');
};
也可用作 Gist
我没有跟上 ember 引擎的开发路线图,或者它是否已添加到比我们当前使用的版本更高的版本中。如前所述,Ember Slack 中的人们非常乐于助人,如果您有这些问题,他们会为您指明正确的方向。
我的问题是当此插件用于另一个插件的依赖项时,我无法在 运行 的插件中获取 contentFor 方法(我知道很困惑)。
我的组织有一个内部 ember 插件,我们用它来为我们的 ember 应用程序分发通用样式、图像和组件。我将该插件称为 org-components
。我们决定采用 material 设计,因此我们选择将 ember-paper 与我们现有的插件一起使用。
为了减少人们在摄取应用程序中需要引用的依赖项数量,我们更愿意将 ember-paper
作为 org-components
的依赖项(而不是 devDependency
).
因此我们的依赖链是这样的:
ember-paper -> org-components -> ember-engine
ember-paper
在 ~/index.js
中定义了一个 contentFor
方法,它将为 Material 图标和头部的字体和 paper-wormhole
注入几个样式表分成 body-footer
以供 select 菜单下拉菜单和 toast 消息使用。由于我不知道的原因,当 ember-paper
被包含为依赖项时,contentFor
方法不会执行,如上所示。
当我将两个组件作为单独的依赖项包含时,contentFor
方法将被执行并且一切如预期的那样工作:
ember-paper -> ember-engine
org-components -> ember-engine
所以我想了解为什么当 ember-paper
插件用作我们现有插件的依赖项时我无法利用它。是什么阻止了 contentFor 构建步骤的执行?在尝试解决此问题时,他们是我应该牢记的最佳实践吗?
感谢 Ember 团队的 Robert Jackson,我最终找到了解决这个问题的方法。
在 Ember Slack 社区寻求帮助后,Robert 让我意识到 ember-engines 中现有的 contentFor
功能尚未扩展以处理此用例.他承认这是一个疏忽,他们很可能会在未来添加该功能,但目前他为我提供了一个解决方法以添加到 /lib/engine-addon.js
.
options.contentFor = function(type, config) {
let deprecatedHooks = ['app-prefix', 'app-suffix', 'vendor-prefix', 'vendor-suffix'];
if (deprecatedHooks.indexOf(type) > -1) {
// ember-engines does not support the deprecated contentFor hooks
return '';
}
let content = [];
if (type === 'head') {
let engineConfig = this.engineConfig(config.environment, {});
let escapedConfig = escape(JSON.stringify(engineConfig));
content = content.push(
`<meta name="${options.name}/config/environment" content="${escapedConfig}" />`
);
}
content = this.addons.reduce((content, addon) => {
let addonContent = addon.contentFor ? addon.contentFor(type, config, content) : null;
if (addonContent) {
return content.concat(addonContent);
}
return content;
}, content);
return content.join('\n');
};
也可用作 Gist
我没有跟上 ember 引擎的开发路线图,或者它是否已添加到比我们当前使用的版本更高的版本中。如前所述,Ember Slack 中的人们非常乐于助人,如果您有这些问题,他们会为您指明正确的方向。