How to exclude a component in ember build

Question

Short Explanation:

How to exclude all component.hbs, component.hbs.js and this.route('component) mention in router.js related to a component while ember build.

Long Explanation:

Think that you have a component in your ember app which you want to be available only in the development environment (lets not worry about how good this approach is, for now!!) and must be removed while building for production.

I have tried a few ember-cli plugins (broccoli-funnel, ember-cli-funnel) which excludes component.hbs.js file but I can still see the references to the component.hbs and this.route('component') in the compiled JS file in /dist folder.

Answer 1

You have multiple options:

1. Don't exclude files or code, but disable with ember-feature-flags addon

Great addon: https://github.com/kategengler/ember-feature-flags

2. Exclude files from the build

As mentioned by pedro, you could checkout ember-composable-helpers for that. They seem to strip the files in index.js#treeForAddon. https://github.com/DockYard/ember-composable-helpers/blob/master/index.js#L28-L33

This might also help: Place to put assets for dev/test in emberjs

3. Exclude code from the build

Might be a bit more complicated... you could checkout how Ember does it with their Feature Flags (although, I'm not sure if they use defeatureify or babel-plugin-filter-imports) * Ember Feature Flags: https://guides.emberjs.com/release/configuring-ember/feature-flags/

• Defeatureify: https://github.com/thomasboyt/defeatureify/

• https://github.com/ember-cli/babel-plugin-filter-imports

Hope this helps!

Answer 2

There are two possible options that would be helpful for you:

The quick way is to install Ember-Cli-Tree-Shaker. In your ember-cli-build.js file, you can include an [exclude] array of files paths always to remove. However, this is an experimental project, and follow all the disclaimers on the site.

The longer, but potentially more stable, way to strip the component from the build, is to create an in-repo addon and in that addon's index.js file, filter components in the treeForAddon() and treeForAddonTemplates() hooks. Here's an example: https://github.com/kaliber5/ember-bootstrap/blob/master/index.js#L282