如何在 Ember.js 上导入库？

我目前正在使用 Ember.js。

我在将某些库导入我的应用程序时遇到一些问题。首先我下载了​​这个库http://www.acme.com/javascript/Clusterer2.js http://www.acme.com/javascript/Clusterer2.js之后我阅读了此中的所有文档导入 JavaScript https://guides.emberjs.com/v2.0.0/addons-and-dependencies/managing-dependencies/。 但我的主要问题是我仍然不知道如何使用它。我正在搜索，经过很长时间我发现在您生成的模板中的 application.hbs 中ember g template application它位于文件夹 ~\app\templates 中，我必须使用此操作进行调用：

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

但我对这个还是不太熟悉。我无法从我尝试使用的库中调用任何操作。

第一偏好：Ember 插件

最好你的 JavaScript 库是一个 ember 插件。然后您只需输入以下命令即可安装它：

# ember install <addon name>

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

第二优选：凉亭套餐

如果没有 ember 插件，那么你可以使用 Bower：

# bower install -S <bower package name>

然后你需要在你的.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 包，则必须手动导入该库。

第 1 步：将 javascript 文件夹保存到您的vendor folder

将 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 对新的 Global 感到满意

你必须做jshint对您将在代码中引用的新全局变量感到高兴。将其添加到您的.jshintrc file:

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

请注意，之后"-Promise"我添加了条目Clusterer line?

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

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