I'm trying to import in an ember project that uses ember-cli-sass a scss file from a node_package which imports another scss file from another node package using ~;
basically the file I'm importing contains the following instruction:
#import "~bootstrap/scss/functions"; // from bootstrap node_module
but that breaks the build since it seems that ember-cli is not resolving the ~;
I've configured ember-cli-build with
sassOptions: {
includePaths: [
'node_modules/<package_name>/scss',
]
},
I have to import this library and have the "ZeroEx" variable global across all ember files.
i tried to add this line in ember-cli-build.js but I got no such file or directory
app.import('node_modules/0x.js');
https://0xproject.com/docs/0x.js#installation
There is a new ember add-on that should make this easy for you: ember-auto-import https://github.com/ef4/ember-auto-import
Does anyone have a working example of a (simple) ember-app project built using Ember-CLI that uses LoDash? (e.g.: I want to use lodash, _.someLodashFunc, in my Routes and Controllers).
I haven't seen any thread / article on the web that gives clear, step-by-step explanation on how to do that.
If possible with lodash v3.0.0 (and I'm using the latest ember-cli, v0.1.9).
Thanks,
Raka
I found out how, you need to generate a custom build of lodash (the "lodash modern"). Use lodash-cli: https://lodash.com/custom-builds
On the command console type: lodash modern ..., and you'll get a javascript file generated: lodash.custom.js
Put that file under "vendor" dir of your ember-cli project.
Modify the Brocfile, add this:
app.import('vendor/lodash.custom.js', {
'lodash': [
'default'
]
});
And that's it.... you don't have to do "import _ from 'lodash'" in any of your js files. In fact, don't do that (you'll get an error). The _ var is readily available.
For example, I have a Route object like this:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
console.log('hohoho: ' + _.chunk(['a', 'b', 'c', 'd'], 2));
return Ember.Object.create({name: 'Raka'});
}
});
And I could see hohoho:,b,c,d got printed in javascript console when I visited that route.
CORRECTION
You don't really need that lodash-cli.
I've tried this way (I guess more proper):
bower install lodash --save
In Brocfile.js, have this line: app.import('bower_components/lodash/lodash.js');
That's it. _ is automatically available in your Routers / Controllers.
I did the same with d3:
bower install d3 --save
In Brocfile.js, have this line: app.import('bower_components/d3/d3.js');
And variable named 'd3' is automatically available.
Added related link:
Import custom library in ember-cli
http://tiku.io/questions/2866484/how-to-include-a-local-javascript-im-ember-cli-application (quote: If you don't need them to minified in your vendor.js file you can put them in the public/js and then include it as a normal script file in app/index.html. I use this method for some libraries like moment.js. The public folder gets directly copied to your site root during the build.)
Proper way to access third party libs such as D3 in Ember CLI?
You can use something ready:
https://github.com/levanto-financial/ember-lodash
or do it manually.
I don't have any example but it should be as easy as modifying these 3 files:
bower.json
Just add the line
"lodash": "4.16.4",
to your dependencies and run bower install in your command line.
Alternatively, you can install it via bower:
$ bower install lodash --save
Brocfile.js
In order to be included to sources by Broccoli:
app.import('bower_components/lodash/lodash.js');
add this somewhere after var app = new EmberApp();
.jshint.rc
Add the line:
"_": true,
somewhere in the predef section (if you don't want to see the warnings like _ is undefined).
I haven't tested that but I hope it helps :)
You can install the latest stable version using Bower. In your project's root directory, run:
bower install lodash --save
Then import it using Brocolli by adding this line in your Brocfile.json somewhere after var app = new EmberApp( ...:
app.import('bower_components/lodash/lodash.js');
ember-lodash addon would be best pet.(https://www.npmjs.com/package/ember-lodash)
install addon : ember install ember-lodash
To include string functions alone
import _string from 'lodash/string';
let truncatedString = _string.trunc(rawString);
To include entire lodash library,
import _ from 'lodash/lodash';
let truncatedString = _.trunc(rawString);
I want to add an SDK type to ember-cli to wrap up complex ajax calls into a simple javascript wrapper returning a known format of POJO that can be tested.
I added an app/sdk/login.js and exported a simple empty class there. When I import it elsewhere I get a broccoli error:
ENOENT, no such file or directory 'F:\Projects\insm-ui\tmp\tree_merger-tmp_dest_
dir-JOQL1Mli.tmp\sdk\login.js'
Standard ember-cli way:
// sdk/login.js
import Ember from 'ember';
export function initialize(container, application) {
container.register('sdk:login', LoginSdk);
}
export default Ember.Object.extend({
});
// somewhere else
import LoginSdk from 'sdk/login'; // this line errors as above in broccoli
What's the correct way to do this?
You need to use relative paths for local files in your import statement. You didn't give the path to the "somewhere else" file. But let's say it's a controller at app/controllers/my-controller.js and your sdk is at app/sdk/login.js.
You could import it in the controller like:
import LoginSdk from '../sdk/login';
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!