如何在Webpacker中正确加载和执行Javascript？

Question

我有一个使用Webpacker的Rails 6应用程序。我正在实现一个现有的bootstrap主题，这个主题不是为Webpacker开发的。这个主题使用node_modules来实现各种javascript功能。这个主题也有很多小的javascript文件来指定选项并触发各种node_modules的执行。我有一个来自主题的Typed.js功能的js文件，它可以在动画中打出句子，这个文件包含一个IIFY函数。

appjavascriptsrctyped.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 application.js文件中，我然后像这样加载node_module类。注意这里的'typed.js'文件不是我的srctyped.js文件--这是两个不同的东西。

appjavascriptpacksapplication.js

import Typed from 'typed.js';

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

现在我需要在EventListener块中加载并执行srctyped.js文件中的代码。

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

我如何正确地导出srctyped.js文件中的代码，将其导入application.js文件中，然后在EventListener块中执行？我是否需要在srctyped.js文件中加入IIFY？

我已经尝试过了。我复制了srctyped.js文件中的所有代码 然后粘贴到EventListener块中，运行正常。但是，我想保留srctyped.js文件，因为我有更多这种类型的文件，用于其他node_module功能。

Answer 1

好吧，我现在是这样工作的，但是如果有更好的方法，请告诉我。

我把srctyped.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();

});