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

Question

I have put my js files eva.min.js/feather.min.js and so on in vendor dir, then I imported them in ember-cli-build.js app.import('vendor/eva.min.js') . But how to use it?

I tried something like import eva from 'eva'/'eva.min'/'eva.min.js' or import Eva from 'eva'; and so on, but it doesn't work.

  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';

Console usually gives me the could not find the module error. And I don't have a deep background in programming, so I would highly appreciate if you explained the problem as simple as possible.

UPD: I found all js code as npm package (it happens that the js files weren't third-party)

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

But all your responses were helpful. Anyway in the near future I expect to use third-party libraries.

Answer 1

A quick way is to use scriptjs and it allows you to load any javascript into your component in the following way: (I am using Yammer as an example)

    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);
    }

You should get the idea how to consume it. Check their docs with lots of examples.

Answer 2

This is not the best solution. But one way of using the third party js is,

1) say you have a function in your js file vendor/third-party.js

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

2) Then import it in your ember-cli-build.js

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

3) After importing restart your server.

Use the function directly in your controller/component as

window["someFunction"]

Answer 3

Unless the JavaScript library being used explicitly supports the import X from 'y' syntax then when you import in the build using the app.import syntax you just use it in your app just as the plugin documentation describes.

So for Swipe you would do the following. Based on this documentation: 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>

This codes creates a component to control your swipe plugin. This code would create a swipe object and isolate it to the component.

Again when you use the app.import you are just loading the library on boot. The library does whatever it says it will do in the docs. Sometimes they register a global object, sometimes they dont.