时间戳

首页 > 解决方案 > Ember-cli-build，排除组件 ember 插件

ember.js - Ember-cli-build，排除组件 ember 插件

问题描述

我在样板文件中使用“核心”余烬插件，

npm link core-addon

这个插件包含通用组件、助手、路由......

有没有办法在样板的 ember-cli-build 文件中排除其中一些组件？

我已经在我的样板项目的 ember-build-cli 中尝试了以下内容，这可能是错误的：

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const environment = EmberApp.env();
module.exports = function (defaults) {
    let app = new EmberApp(defaults, {
        funnel: {
                enabled:true,
                exclude:['core-addon/pods/components/pages/**/*']
            },
    });
return app.toTree();
};

Ember 版本：3.5.0 Ember cli 版本 3.5.0 节点版本 8.11.3

标签： ember.jsember-cliember-addon

解决方案

插件通常采取与此相反的方法：插件通过消费应用程序中的配置管理合并到消费应用程序的内容。

在最高级别，每个插件都有一个入口点，即位于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以获取更多信息。

推荐阅读