Как использовать импортированный сторонний js (не пакет addon / npm) в контроллере / компоненте? - PullRequest
Новая
       31

Как использовать импортированный сторонний js (не пакет addon / npm) в контроллере / компоненте?

0 голосов
/ 17 апреля 2019

Я поместил мои js-файлы eva.min.js/feather.min.js и т. Д. В vendor dir, затем импортировал их в 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

Но все ваши ответы были полезны. Во всяком случае в ближайшее время ожидаю использовать сторонние библиотеки.

Ответы [ 3 ]

0 голосов
/ 17 апреля 2019

Это не лучшее решение.Но один из способов использования 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"]
0 голосов
/ 17 апреля 2019

Если библиотека 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, вы просто загружаете библиотеку при загрузке.Библиотека делает все, что говорит, что будет делать в документах.Иногда они регистрируют глобальный объект, иногда - нет.

0 голосов
/ 17 апреля 2019

Быстрый способ - использовать 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);
    }

Вы должны понять, как его потреблять.Проверьте их документы с большим количеством примеров.

...