Ember Cli - ES6 dependent on vendor in ember-cli-build?

Question

I am writing an Ember.js application using Ember Cli and I want to include a non-bower dependency - basically a dependency on my vendor folder.

The instructions on this occasion tell me to add the following line to my ember-cli-build.js :

 app.import('vendor/dependency-to-include.js'); 

This will work fine with normal ES5 setup, but what if I want to add a dependency written in ES6?

Now it just delivers it to the browser without changes, which causes an error, for example:

 Uncaught SyntaxError: Unexpected reserved word 

because my ES6 dependent dependency uses the following syntax:

 import Util from './util 

I assume I need to tell ember-cli-build to pass this particular dependency before passing it to the browser, but how can I do this?

thanks

Answer 1

To forward imported dependencies, you need to run the imported file through the broccoli-babel-transpiler broccoli addon. For a basic example, check this file: https://github.com/thefrontside/ember-impagination/blob/2fa38d26ef1b27a3db7df109faa872db243e5e4c/index.js . You can adapt this addon to in the repo addon for your project. See this link for background discussion and @rwjblue and @cowboyd for the actual fix: https://github.com/ember-cli/ember-cli/issues/2949

Answer 2

Are you currently including Babel in your project? I would think that it checks your supplier’s directory just like everything else, and converts the ES6 code to ES5.

Another option is to simply convert the file to ES5 manually when you need to include the provider file with ES6 syntax. Not necessarily perfect, but if it is a static file, then you need to do something, and then forget about it.