Ember external js and global

Question

In my Ember app I am trying to add the money.js external lib. I successfully achieved that by installing it with bower and then adding app.import('bower_components/money.js/money.js'); to my ember-cli-build.js .

money.js defines a global variable fx which is available all over my app. However I receive many JSHint Errors while building the app like:

components/purchase-form.js: line 41, col 29, 'fx' is not defined.

Ember docs states:

Typically, the application object is the only global variable. All other classes in your app should be properties on the Ember.Application instance, which highlights its first role: a global namespace.

I just wonder what is the proper way to import this kind of lib along with its global

Answer 1

If you app.import a global you have to possibilities to make jsHint happy:

1. Adding /* global fx */ before accessing the global per file.
2. Adding it to predefs section in .jshintrc as @kumkanillam mentioned in his answer.

If you don't like to access dependency as a global you could shim it. Ember-cli provides a vendor-shim generator: ember generate vendor-shim money.js Afterward you could use import in your modules.

This topic is well-documented in ember-cli docs .

Answer 2

To avoid jsHint error, you can mention fx global variable

{
  "predef": [
    "document",
    "window",
    "-Promise",
    "fx"
  ]
}