Ember.js Importing JavaScript libraries into your Ember application

Quang Nguyen
Sep 3, 2018 · 2 min read

I’m sure many of us who uses Ember (along with many other frameworks) have ran into this problem before and was so confused as you look through Google to find a concrete answer. Well look no more! I’ve got the solution for you.

I did write a post regarding this problem and discussing one solution to importing libraries using Browserify, so if you guys are interested go here — Import Node Modules the Ember Way.

This particular post will help you discover another solution to importing JavaScript libraries in Ember.

First of all you’re gonna want to install bower for this. Ember has multiple ways of importing JavaScript libraries but the best way that I’ve used is using bower and creating a shim vendor.

I had to import d3.js into one of my projects so I looked around on how to do it that doesn’t require browserify. And I stumbled upon this solution using bower from simplelabs.

The directions to importing npm libraries from simplelabs is very simple and once you complete them, you will be able to use any npm library in your Ember application.

For my use case, what I did was installed d3.js using bower:

bower install --save d3

Then I had to import the module into Ember so that Ember will recognize and load it during the build process in order for the application to run. You would want to do this in your ember-cli-build.js file.

app.import('bower_components/d3/d3.js');

Now that the Ember app recognizes d3 as a global variable, we want to use ES6 imports to import them into our app by creating a “vendor shim”, which according to simplelabs, “wraps our global module and provides a way for us to import the module like ES6”.

To create a vendor shim, we’ll use the ember cli tool to generate a vendor shim file:

ember generate vendor-shim d3

Running this command will generate a vendor/shims/d3.js file that looks like this:

(function() {  
function vendorModule() {
'use strict';
return {
'default': self['d3']
};
}
define('d3', [], vendorModule);
})();

The next step is to import this vendor shim file into our app similar to how we did it with our d3 global variable before in our ember-cli-build.js file:

app.import('vendor/shims/d3.js');

And finally, you can do import d3 from 'd3' in your Ember application!

quangtn0018

Just my findings and techniques that I’ve learned from working and doing side projects on all things software engineering related

Quang Nguyen

Written by

Software Engineer

quangtn0018

Just my findings and techniques that I’ve learned from working and doing side projects on all things software engineering related

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade