Question

我将js文件eva.min.js/feather.min.js等放在供应商目录中，然后将它们导入 ember-cli-build.js {{1 }}。但是如何使用呢？

我尝试了类似app.import('vendor/eva.min.js')或import eva from 'eva'/'eva.min'/'eva.min.js'之类的方法，但是没有用。

import Eva from 'eva';

  app.import('vendor/eva.min.js');
  app.import('vendor/bootstrap.min.js');
  app.import('vendor/feather.min.js');
  app.import('vendor/popper.min.js');
  app.import('vendor/jquery-slim.min.js');
  app.import('vendor/swipe.js');

控制台通常会给我找不到模块错误。而且我没有编程的深厚背景，因此，如果您能尽可能简单地解释问题，我将不胜感激。

UPD：我发现所有js代码都是npm包（碰巧js文件不是第三方）

import Swipe from 'swipe';

但是您的所有答复都是有帮助的。无论如何，在不久的将来，我希望使用第三方库。

Answer 1

一种快速的方法是使用scriptjs，它允许您通过以下方式将任何javascript加载到组件中：（我以Yammer为例）

IASTTranslationUnit.getComments()

您应该了解如何使用它。通过大量示例查看他们的文档。

Answer 2

这不是最佳解决方案。但是使用第三方js的一种方法是

1）说您的js文件vendor/third-party.js中有一个函数

someFunction = function (element) {
  ...
  console.log("works")
};

2）然后将其导入您的ember-cli-build.js

...
app.import('vendor/third-party.js');
...

3）导入restart服务器之后。

直接在您的控制器/组件中使用该功能

window["someFunction"]

Answer 3

除非正在使用的JavaScript库显式支持import X from 'y'语法，否则当您使用app.import语法导入构建时，您只需在应用程序中使用它即可，如插件文档中所述。

因此，对于Swipe，请执行以下操作。根据此文档：https://github.com/thebird/Swipe

// ember-cli-build.js
app.import('myswipe.js`);

// component.js
/* global Swipe */ // This silences the linter from throwing errors...
classNames: ['swipe'],
didInsertElement() {
   this._swipe = Swipe(this.element, {
       option1: option1
   });
}

// component.hbs
<div class='swipe-wrap'>
    {{yield}}
</div>

此代码创建一个组件来控制您的滑动插件。此代码将创建一个滑动对象并将其隔离到组件。

再次使用app.import只是在引导时加载库。该库将按照文档中的说明进行操作。有时他们注册一个全局对象，有时却不注册。

如何在控制器/组件中使用导入的第三方js（不是addon / npm包）？

3 个答案: