Как правильно загрузить и выполнить Javascript в Webpacker - PullRequest
Новая
       154

Как правильно загрузить и выполнить Javascript в Webpacker

1 голос
/ 28 мая 2020

У меня есть приложение Rails 6 с Webpacker. Я реализую существующую тему bootstrap, которая не была разработана для Webpacker. Тема использует node_modules для различных функций javascript. В теме также есть множество маленьких javascript файлов, которые определяют параметры и запускают выполнение различных модулей node_modules. У меня есть один файл js из темы для функции Typed. js, который печатает предложения в анимации. Этот файл содержит функцию IIFY.

/ app / javascript / src / typed. js


(function() {

  //
  // Variables
  //

  var toggle = document.querySelectorAll('[data-toggle="typed"]');

  //
  // Functions
  //

  function init(el) {
    var elementOptions = el.dataset.options;
        elementOptions = elementOptions ? JSON.parse(elementOptions) : {};
    var defaultOptions = {
      typeSpeed: 40,
      backSpeed: 40,
      backDelay: 1000,
      loop: true
    }
    var options = Object.assign(defaultOptions, elementOptions);

    // Init
    new Typed(el, options);
  }

  //
  // Events
  //

  if (typeof Typed !== 'undefined' && toggle) {
    [].forEach.call(toggle, function(el) {
      init(el);
    });
  }
})();

В моем приложении Rails. js файл, я затем загружаю класс node_module следующим образом. Обратите внимание, что файл 'typed. js' здесь не является моим файлом src / typed. js - две разные вещи:

/ app / javascript / packs / application. js

import Typed from 'typed.js';

document.addEventListener("turbolinks:load", () => {
    var inputTZ = document.getElementById("timezone"); 
    if(inputTZ) {
        inputTZ.value = jstz.determine().name();
    }
});

Теперь мне нужно загрузить и выполнить код из файла src / typed. js в блоке EventListener. 

document.addEventListener("turbolinks:load", () => { ... });

Как правильно экспортировать код из файла src / typed. js, импортировать его в файл application. js, а затем выполнить его в блоке EventListener? Нужен ли мне вообще IIFY внутри файла src / typed. js?

Что я пробовал: я скопировал весь код из файла src / typed. js и вставил его в EventListener блок, и он работает нормально. Но я хочу оставить файл src / typed. js на месте, так как у меня гораздо больше файлов этих типов для других функций node_module.

1 Ответ

1 голос
/ 28 мая 2020

Хорошо, у меня все работает так, но, пожалуйста, дайте мне знать, есть ли более эффективные способы сделать это.

Я меняю файл src / typed. js на приведенный ниже, избавляясь от IIFY и, что важно, я импортирую основной класс из этого файла: 

import Typed from 'typed.js';

export default function() {
... same code as in the original file ...
}

Затем в файле application. js я делаю: 

import typed from '../src/typed.js';

document.addEventListener("turbolinks:load", () => {

    typed();

});
...