ember-cli-es6-transform/WIP-advanved.md

Import ES6 modules from npm, bower or anywhere else in your app.

[Advanced – Rollup in an addon](#im-writing-an-addon)  
[Advanced – Rollup in an app](#im-writing-an-app)  

#### Advanced – multiple files

If you want to import a complex, multi-file dependency, your best bet is to use `rollup`.

##### I'm writing an addon

In your addon's `index.js`, you have access to the `treeForVendor` hook. Your goal is to create a Broccoli tree of the files you want to add, transpile them and merge the tree into the vendor tree. You can then import the files by name using `app.import`.

```js
/* eslint-env node */
'use strict';

const mergeTrees = require('broccoli-merge-trees');
const Rollup = require('broccoli-rollup');
const es6Transform = require('ember-cli-es6-transform');

module.exports = {
  name: 'import-some-package',

  included(app, parentAddon) {
    this._super.included.apply(this, arguments);
    
    // You can import the packages either in the `included` hook of the
    // in-repo addon or from the consuming app's `ember-cli-build.js`.
    app.import('vendor/some-package.js');
    app.import('vendor/other-package.js');
  },
  
  // If you have your own vendor files, make sure to merge the tree passed as an argument.
  treeForVendor(/*vendorTree*/) {
    // Generate a tree with Rollup.
    let somePackageTree = new Rollup('node-modules/some-package', {
      rollup: {
        input: 'index.js',
        output: {
          file: 'some-package.js',
          format: 'es',
        }
      }
    });

    let otherPackageTree = new Rollup('node-modules/other-package', {
      rollup: {
        input: 'other-package-file.js',
        output: {
          file: 'other-package.js',
          format: 'es',
        }
      }
    });

    let trees = mergeTrees([somePackageTree, otherPackageTree]);

    // Transpile the tree.
    trees = es6Transform(trees, babelOptions);

    return trees;
  }
};
```

##### I'm writing an app

Things are a bit more complex in this case. Apps don't have public access to the vendor tree, so your only option is to use an addon.

The main goal is to leverage the `treeForVendor` hook that addons have access to. There are 2 approaches:

1. **Create an in-repo addon**

`ember generate in-repo-addon import-some-package`

Install the neccessary broccoli packages.

`npm install --save-dev broccoli-source broccoli-merge-trees`

Follow the instructions for [importing files in an addon](#im-writing-an-addon).

2. **Use [ember-cli-node-modules-to-vendor](https://github.com/kellyselden/ember-cli-node-modules-to-vendor)**.

This addon does the same thing as option 1 behind the scenes. You can use Rollup to create your tree, transpile it and pass it to `ember-cli-node-modules-to-vendor`. The addon will merge the tree into the vendor tree, letting you use `app.import` to include it into the final vendor output.

Following the [advanced instructions for ember-cli-node-modules-to-vendor](https://github.com/kellyselden/ember-cli-node-modules-to-vendor#advanced-usage):

```js
  // ember-cli-build.js

  const Rollup = require('broccoli-rollup');
  const es6Transform = require('ember-cli-es6-transform');
  
  let nodeModulesToVendor = [];
  
  let somePackageTree = new Rollup('node-modules/some-package', {
    rollup: {
      input: 'index.js',
      output: {
        file: 'some-package.js',
        format: 'es',
      }
    }
  });

  let app = new EmberApp(defaults, {
    nodeModulesToVendor
  });

  const babel = app.project.findAddonByName('ember-cli-babel');
  const babelOptions = babel.buildBabelOptions();
  somePackageTree = es6Transform(somePackageTree, babelOptions);

  nodeModulesToVendor.push(somePackageTree);

  app.import('vendor/some-package.js');

  return app.toTree();
```