插件通常采取与此相反的方法:插件通过消费应用程序中的配置管理合并到消费应用程序的内容。
在最高级别,每个插件都有一个入口点,即位于index.js
插件根目录中的文件。config/environment.js
该插件提供了某些配置选项,在安装时它会从消费应用程序 中读取这些选项。
我认为对您来说是一个非常好的案例研究ember-bootstrap
。查看他们的配置选项,更具体地说是blacklist
选项。它们允许消费应用程序只安装引导组件的一个子集。此外,该项目支持 bootstrap 3 或 bootstrap 4,但消费应用程序并没有同时获得两者!工作在index.js中完成
让我们看看他们如何将某些组件添加到使用应用程序的黑名单(即排除):
treeForApp(tree) {
tree = this.filterComponents(tree);
return this._super.treeForApp.call(this, tree);
},
filterComponents(tree) {
let whitelist = this.generateWhitelist(this.bootstrapOptions.whitelist);
let blacklist = this.bootstrapOptions.blacklist || [];
// exit early if no opts defined
if (whitelist.length === 0 && blacklist.length === 0) {
return tree;
}
return new Funnel(tree, {
exclude: [(name) => this.excludeComponent(name, whitelist, blacklist)]
});
}
它this.excludeComponent
的核心是一个布尔返回过滤器函数,如果黑名单在黑名单情况下包含它,则返回true(排除它)。该treeForApp
函数返回所有应用程序文件的树,即将从插件app
目录合并到消费应用程序的内容:
消费应用程序ember-cli-build
看起来像这样:
//your-bootstrap-app/ember-cli-build.js
module.exports = function(defaults) {
let app = new EmberApp(defaults, {
'ember-bootstrap': {
blacklist: ['bs-popover', 'bs-accordion']
}
});
return app.toTree();
};
结果将是 nobs-popover
并且bs-accordion
在消费应用程序树中不可用。这些选项是在index.js
文件中获得的,如下所示:
let options =Object.assign({}, defaultOptions, app.options['ember-bootstrap']);
this.bootstrapOptions = options;
查看此构建插件的一般指南和更高级的 api以获取更多信息。