Question

我目前正在与Ember.js合作。

我在将一些库导入我的应用程序时遇到了一些问题。首先我下载了这个库http://www.acme.com/javascript/Clusterer2.js，之后我正在阅读这个Importing Javascript中的所有文档。但我的主要问题是我还不知道如何使用它。我正在搜索，经过长时间的工作后，我发现在模板中的application.hbs中使用ember g template application生成的文件位于〜\ app \ templates文件夹中，我必须使用此操作进行调用：

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

但我对此仍然不太熟悉。我无法调用我尝试使用的库中的任何操作。

Answer 1

第一选择：Ember Addon

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

# ember install <addon name>

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

第二优先：凉亭包

如果没有一个余烬附加组件，那么你可以使用凉亭：

# bower install -S <bower package name>

然后，您需要在.ember-cli-build文件中添加依赖项：

/*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程序包找到，则您必须手动导入库。

第1步：将javascript文件夹保存在vendor文件夹

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

第2步：修改您的.ember-cli-build文件，将其包含在已编译的Ember应用

中

像这样修改你的文件：

/*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文件中：

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

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

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

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

如何在Ember.js上导入库？

1 个答案:

第一选择：Ember Addon

第二优先：凉亭包

最后的偏好：手动导入