如何在控制器/組件中使用導入的第三方js（不是addon / 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';或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'語法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您只是在啟動時加載庫。 該庫可以完成它在文檔中所做的任何操作。 有時他們會注冊一個全局對象，有時他們不會。