How can I bundle JavaScript files under /vendor in an ember-cli project?

Question

Let's say I have an ES6 library "foo" under my /vendor directory in an EmberJS project constructed using the latest ember-cli (at the time of this writing 2.4.3). Assume that foo is a library with multiple files, eg bar.js , baz.js , etc. and they all export something.

I would like to take vendor/foo/bar.js , vendor/foo/baz.js , etc. and bundle them into a distribution file, eg vendor/foo/dist/foo-bundle.js that I can then import into Ember with:

app.import("vendor/foo/dist/foo-bundle.js");

This appears like it should be possible with a bundler and/or transpiler (like Babel ), but it isn't clear to me what tools I should use and in what combination. Does Ember have a built in tool for doing what I want through ember-cli (if it does, I must be blind)? Should I be using an external bundler like webpack , browserify , or rollup ?

In general there seems to be a lot of noise around JavaScript tooling making it difficult for me to understand what choices I have for this problem and how to properly leverage them. Any assistance would be greatly appreciated.

---

Some notes that may be helpful...

I have tried a few things, so far:

I have tried just importing the main.js file, in hopes that EmberJS would also walk the dependency tree and import any other files that were referenced in import statements. This only imported the main.js file and no other dependencies.

I've looked at broccoli-es6modules and had errors when running it, but it also uses esperanto which is deprecated in favor of rollup.

I've also tried using rollup directly, with a minor degree of success, but often times my bundle.js output is empty and doesn't include the code from bar.js or baz.js because I've only imported them in the entry point (eg main.js ):

main.js
-------
import bar from './bar.js';
import baz from './baz.js';

bar.js
------
export default function bar() {
  ...
}

baz.js
------
export default function baz() {
   ...
}

I have found if my main.js includes a function that calls either code from bar or baz I get more than an empty bundle, but if foo is just a collection of scripts from a third-party vendor that have no "application entry point", aside from what amounts to something like a manifest file, rollup seems to be the wrong choice for what I'm looking for.

Thanks again!

Answer 1

(Updated with the latest options.)

There are a few options.

1. If baz.js and bar.js are your own modules and code, the best if you just place them in app/my-awesome-module folder. You can use ES6 import to import in other place, where you would like to use them. Ember CLI will transpile, concatenate and minify them automatically.

2. If you would like to use 3rd party modules or solutions, check out http://emberobserver.com , most of the popular library already converted to Ember Addon, so you can install them with ember install .

3. Use ember-auto-import in your project and import libraries as normal ES6 module like this: import MyCoolModule from "my-cool-module";