如何在控制器/组件中使用导入的第三方 js(不是插件/npm 包)

Question

我已经把我的js文件放在供应商目录中eva.min.js/feather.min.js等等，然后我将它们导入ember-cli-build.js 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');

import Swipe from 'swipe';

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

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

https://www.npmjs.com/package/feather
https://www.npmjs.com/package/popper.js
https://www.npmjs.com/package/jquery-slim
https://www.npmjs.com/package/swipe
https://www.npmjs.com/package/bootstrap
https://www.npmjs.com/package/eva-icons

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

Answer 1

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

    import $scriptjs from 'scriptjs';
    componentDidUpdate() {
       //script loader
       setTimeout(function(){
         $scriptjs('https://c64.assets-yammer.com/assets/platform_embed.js', 
         () => {
            window.yam.connect.embedFeed(YammerHelper.loadComments());
         });
       }, 1000);
    }

你应该知道如何使用它。用很多例子检查他们的文档。

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时，您只是在启动时加载库。该库在文档中执行它所说的任何操作。有时它们注册全局对象，有时不注册。