如何在Ember.js上导入库？

Question

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

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

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

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

Answer 1

第一选择:Ember Addon

您的JavaScript库最好是ember附加组件.然后你只需输入以下命令就可以安装它:

# ember install <addon name>

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

第二个偏好:凉亭包

如果没有ember附加组件,那么你可以使用bower:

# 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对新的Global感到高兴

您将不得不对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文件包含在已编译的输出中,您应该能够在代码中引用它.