javascript - How to import a library on Ember.js? - Stack Overflow

admin管理员组

文章数量:1304577

I am currently working with Ember.js.

I have some issues importing some library into my application. First I downloaded this library .js after that I was reading all the documentation in this Importing Javascript. But my main problem is I still don't know how to use it. I was searching and after long hours I found that in the application.hbs in the template that you generate with ember g template application that is in the folder ~\app\templates I have to make a call with this action:

{{outlet}}
{{link-to nameoftheLibrary}}

But I am still not much familiar with this. I can't call any action from the library that I am trying to use.

I am currently working with Ember.js.

I have some issues importing some library into my application. First I downloaded this library http://www.acme./javascript/Clusterer2.js after that I was reading all the documentation in this Importing Javascript. But my main problem is I still don't know how to use it. I was searching and after long hours I found that in the application.hbs in the template that you generate with ember g template application that is in the folder ~\app\templates I have to make a call with this action:

{{outlet}}
{{link-to nameoftheLibrary}}

But I am still not much familiar with this. I can't call any action from the library that I am trying to use.

• javascript
• ember.js
• web-applications
• import

Share Improve this question Follow asked Aug 12, 2016 at 13:54 Augusto GonzalezAugusto Gonzalez 24644 silver badges1919 bronze badges 1

• save Clusterer2.js file into vendor folder. and in ember-cli-build.js file include the below line app.import('vendor/Clusterer2.js')..and then you can start using like var clusterer = new Clusterer( map ) – Ember Freak Commented Aug 12, 2016 at 14:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

First Preference: Ember Addon

Preferably your JavaScript library will be an ember add-on. Then you can install it by simply typing:

# ember install <addon name>

This will usually take care of all importing that you need to do. The JavaScript code will be included in your piled Ember app.

Second Preference: bower package

If there isn't an ember add-on, then you can use bower:

# bower install -S <bower package name>

Then you need to add the dependency in your .ember-cli-build file:

/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
      // snipped out some stuff
      });

  // this library is in your bower_ponents/somelibrary/somelibrary.js file
  app.import(app.bowerDirectory + '/somelibrary/somelibrary.js');

  return app.toTree();
};

Last Preference: Manual import

If you can't find your required library as an ember add-on or bower package, you're going to have to import the library manually.

Step 1: save the javascript folder in your vendor folder

Save your Clustererer2.js file in a folder like vendor/clusterer/clusterer2.js.

Step 2: Modify your .ember-cli-build file to include this in your piled Ember app

Modify your file like this:

/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
      // snipped out some stuff
      });

  app.import('vendor/clusterer/clusterer2.js');

  return app.toTree();
};

Step 3: Make JSHint happy about the new Global

You're going to have to make jshint happy about the new global variable you're going to reference in your code. Add it in your .jshintrc file:

{
  "predef": [
    "document",
    "window",
    "-Promise",
    "Clusterer"
  ],
  "browser": true,
  "boss": true,
  // snipped a lot of stuff
  "esnext": true,
  "unused": true
}

Notice that after the "-Promise" entry I added the Clusterer line?

Step 4: Rebuild Ember app and use your new library

Now that you've included the javascript file in your piled output, you should be able to reference it in your code.

本文标签： javascriptHow to import a library on EmberjsStack Overflow