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
If you app.import a global you have to possibilities to make jsHint happy:
Adding /* global fx */ before accessing the global per file.
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.
To avoid jsHint error, you can mention fx global variable
{
"predef": [
"document",
"window",
"-Promise",
"fx"
]
}
Related
If I am correct DefinitelyTyped has TypeScript definitions for multiple libraries. In my case I wanted to use Google Charts definitions available here.
I have installed them using
npm install --save-dev #types/node
npm install --save-dev #types/google-apps-script
But I don't know how to import them to my project. I have tried using
import { Google } from '#types/google-apps-script';
But Visual Studio Code throws an error, that it is not a module and my declare const google is still of :any, which I want to avoid.
Any help or hint would be appreciated.
To get Google Charts to work in my Angular 5 project I used these DefinitelyTyped types instead which is only for the Google Charts JavaScript library.
#types/google.visualization
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/google.visualization
Here is how I imported the types into an #Injectable Service class. This statement did not raise an error about it not being a module like when I tried to import using *.
import { } from 'google.visualization';
In the constructor is where you can load the charts library just once and then create your chart functions to pass with data and config options to the callback (setOnLoadCallback).
google.charts.load('current', {'packages':['corechart']});
I added a script element to index.html to load the 'https://www.gstatic.com/charts/loader.js' but perhaps there is a better way to include external libraries such as this.
In my project if I include bootstrap's javascrpt file via
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.min.js'); in ember-cli-build.js I get a bunch of js errors.
If instead I include it in index.html it works fine. Any idea what could be causing this?
Error-
SyntaxError: export declarations may only appear at top level of a module
I can think of 3 things to try here:
Link to the full file. I had this line in a (pretty old) app that worked fine:
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
Make sure you app.import is inside of the main module.exports declaration in your ember cli build.
You might also try testing it out with a different bower package to see if the problem is bootstrap or your app.
If all else fails (and even if it succeeds), I highly recommend using ember bootstrap instead. It will handle the stylesheets for you and provide some Ember friendly ways to implement bootstrap components. You won't need to do the import anymore. Overall, it's best to avoid mixing libraries that modify the DOM (like plain bootstrap) with ember components. http://www.ember-bootstrap.com
I have an ember app, and a folder with a file playGame/game.js. This file includes game logic, and I want to import it for asset compilation.
If this file is under app/playGame/game.js and my Brocfile is like this:
app.import('app/playGame/game.js')
this gives the error, path or pattern app/playGame/game.js didn't match any files..
but if I put the file under bower_components/playGame/game.js and my Brocfile:
app.import('bower_components/playGame/game.js'), this compiles successfully.
What is the problem and solution here?
There are two parts to this:
Where should I put my file to import it as an asset?
Why isn't putting it in my app-folder working?
The way to do what you want is to create a folder called vendor in your root, put the file somewhere in there, and then import it in your Brocfile.js like so:
app.import('vendor/playGame/game.js');
This is documented on ember-cli.com, although somewhat hidden.
You could also put it in bower_components, but that folder is for things installed with bower, and could theoretically be deleted (in fact, this is a common recommendation to various issues). Things in bower_components is also not checked in to version control by default, which you probably want to do in this case.
This should solve your issue.
Now, why doesn't it work to put it in /app?
app is a special folder. From the documentation:
Contains your Ember application’s code. Javascript files in this
folder are compiled through the ES6 module transpiler and concatenated
into a file called app.js.
This is what makes it possible for you to import stuff from within your app. The folders in app is available directly under your <appname> namespace, along with some other files and folders like config/environment.
Example:
import myWidget from 'my-app/widgets/my-widget';`
The referenced file is /app/widgets/my-widget.js.
The ember-cli website has some more resources for how to use modules. Read those if this doesn't make any sense.
To sum up:
You could put your file in app, but that would make it part of your transpiled package, and you'd have to use it that way internally with an export and everything else that comes with it. It would end up as part of <appname>.js
You could put your file in vendor and import it in your Brocfile.js as explained above. It would be part of vendor.js and load before your app code.
Let's say I want to use Immutable in my project (or any given npm package). I have npm installed it, so it is in node_modules. Of course, it has CommonJS exports there. I, however, want to use es6 modules in my project.
I am using Webpack to compile it all together, with the 6to5-loader to deal with es6 module syntax.
In my source file, I say import Immutable from 'immutable'; --- but this causes a problem because the es6 import is looking for an es6 default to have been exported, which isn't the case (for Immutable or probably almost any other npm package). The compiled code ends up looking like this: var Immutable = require('immutable')["default"]; --- which of course throws an error, since there is no default property to find.
Can I consume the npm packages with es6 modules?
Babel.js contributor here. You're looking for the following:
import * as Immutable from 'immutable';
// compiles to:
var Immutable = require('immutable');
Interactive demo
Note: This is with either the common or commonInterop modules option. For others, see: https://babeljs.io/docs/usage/modules/
Just figured it out. (The solution is tool-specific --- but es6 modules only exist now insofar as they are tool-enabled, so I think that's enough of an "answer".)
6to5's default module transpilation uses the common option, which results in the very problem I griped about above. But there is another option: commonInterop --- which must have been built to deal with exactly the situation I'm dealing with. See https://6to5.github.io/modules.html#common-interop
So three cheers for 6to5.
So this is a really basic question. In all my blueprinted files, I see import statements such as:
import DS from 'ember-data';
Now I know that the build process is finding these in the vendor directory where bower installed them. Recently, I added moment.js, and I'd like to create a helper using it. However, there must be an additional naming convention that's being used because I can't simply
import moment from 'moment';
-- it claims it cannot find it in the tree merger. What is the right way to tell Broccoli where to find things when I want to import them?
Here is how I got things to work.
Install moment.js using bower install
Add the following line in Brocfile.js
app.import('vendor/moment/min/moment.min.js');
In your code, you do NOT have to import moment as it is NOT a ES6 module. You can call moment directly. For example,
var currDate = moment();
In the files where you use moment, don't forget to add the below comment as the first line of your file. You need to do this to avoid the jshint errors shown by ember-cli when you build the code
/* global moment:true */
Hope this helps!