如何在Ember.js上导入库？ [英] How to import a library on Ember.js?

问题描述

我目前正在使用Ember.js。

I am currently working with Ember.js.

我在将一些库导入我的应用程序时遇到了一些问题。首先我下载了​​这个图书馆 http://www.acme.com/javascript/Clusterer2.js之后我正在阅读导入Javascript <的所有文档。 / A>。
但我的主要问题是我仍然不知道如何使用它。我正在搜索，经过长时间的工作后，我发现你在模板中的application.hbs中使用 ember g模板应用程序生成了该文件夹〜\\\模板我必须通过此操作拨打电话：

I have some issues importing some library into my application. First I downloaded this library http://www.acme.com/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.

推荐答案

第一首选项：Ember Addon

优选地，您的JavaScript库将是一个余烬附加组件。然后您只需输入以下命令即可安装：

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>

这通常会处理您需要执行的所有导入。 JavaScript代码将包含在您编译的Ember应用程序中。

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

如果有这是一个ember附加组件，然后你可以使用bower：

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

# bower install -S <bower package name>

然后你需要在 .ember-cli-build中添加依赖项 file：

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_components/somelibrary/somelibrary.js file
  app.import(app.bowerDirectory + '/somelibrary/somelibrary.js');

  return app.toTree();
};

最后的偏好：手动导入

如果如果您无法找到所需的库作为ember附加程序或bower程序包，则必须手动导入库。

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.

步骤1 ：将javascript文件夹保存在供应商文件夹中

Step 1: save the javascript folder in your vendor folder

将Clustererer2.js文件保存在文件夹中喜欢 vendor / clusterer / clusterer2.js 。

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

第2步：修改 .ember-cli-build 将此文件包含在已编译的Ember应用程序中

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

修改您的文件如下：

/*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();
};

第3步：让JSHint对新的全球

您将不得不对要在代码中引用的新全局变量感到高兴 jshint 。将其添加到 .jshintrc 文件中：

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
}

请注意，在 - Promise条目之后我添加 Clusterer 行？

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

步骤4：重建Ember应用并使用新库

现在您已经在编译输出中包含了javascript文件，您应该可以在代码中引用它。

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

这篇关于如何在Ember.js上导入库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！