Use ES6 library in Ember-cli project

20
votes

I have a small EmberJS application that uses Ember-Cli. My application has a private ES6 library that is a bower dependency. Basically, what I want is to import the library and use it wherever I want.

If I'm not wrong, I should transpile the library in my brocfile.js and use it afterwards. Unfortunately, I cannot provide too much concrete information but I'll try my best to be the clearer possible.

My external library is named main-lib and is structured the following way (it is working in another project):

  • bower_components
    • main-lib
      • api.js
      • main.js
      • message.js

In the main.js file, I have the following:

import Api from 'main/api';
import Message from 'main/message';

var main = {};

main.api = Api;
main.message = Message;

export default main;

So, what I want to do, is, in my application, to import main and use the different functions it contains.

Example, in a certain emberjs controller:

import Main from 'main';

//use Main here

To do so, I thought of doing the following in my brocfile.js

var tree = 'bower_components/main-lib';
var ES6Modules = require('broccoli-es6modules');
var amdFiles = new ES6Modules(tree, {
  format: 'amd',
  bundleOptions: {
    entry: 'main.js',
    name: 'mainLib'
  }
});

However, this does nothing. Basically, I want the transpiled files to be included in vendor.js or somewhere where I would be able to use the library by importing it.

There's something I'm missing here but I can't pinpoint it.

Edit1: After adding these lines at the end of my brocfile.js:

mergeTrees = require('broccoli-merge-trees')

module.exports = mergeTrees([app.toTree(), amdFiles]);

I can get an ES5 that looks like this:

define(['main/api', 'main/message'], function(api, message) {

    var main = {};

    main.api = Api;
    main.message = Message;

    var _main = main;
    return _main;
});

The problem is that it does not import main/api and main/message as well. Do I have to repeat the code for each file that I want ?

Also, the file is not concatenated in vendor.js but simply but at the root of /dist

3
javascriptember.js

3 Answers

5
votes

You have the following: import Api from 'main/api' - but I don't see a folder called main in what you've explained - only a folder called main-lib ...

Could it be that main/api and main/message are not included because they actually don't exist? You might need to use main-lib/api and main-lib/message in your main.js file

2
votes

The integration of Broccoli with ember-cli already includes a transpiler, so I think something like this should be enough:

app.import('bower_components/main-lib/main.js', {
  type: 'vendor',
  exports: { 'main': ['default'] }
);

And then you can:

import Main from 'main';

With what you currently have in your Brocfile you still need to merge your amdFiles (app.import would do that for you).

Something like:

mergeTrees = require('broccoli-merge-trees')


module.exports = mergeTrees([app.toTree(), amdFiles]);

None of this is tested, but you get the idea.

2
votes

Ember seem to be advocating using: https://www.npmjs.com/package/broccoli-es6modules

This would mean importing your module would look something like:

var mergeTrees = require('broccoli-merge-trees');

var tree = './bower_components/main-lib';
var ES6Modules = require('broccoli-es6modules');
var amdFiles = new ES6Modules(tree, {
  format: 'amd',
  bundleOptions: {
    entry: 'main.js',
    name: 'main-lib'
  }
});

module.exports = mergeTrees([app.toTree(), amdFiles])