javascript - 如何在 Webpacker 中正确加载和执行 JavaScript

Question

我有一个带有 Webpacker 的 Ruby on Rails 6 应用程序。我正在实现一个不是为 Webpacker 开发的现有 bootstrap 主题。
该主题将 node_modules 用于各种 JavaScript 功能。该主题还有许多小的 JavaScript 文件，用于指定选项并触发各种 node_modules 的执行。我有一个来自主题的 JavaScript 文件，用于在动画中输入句子的 Typed.js 功能。该文件包含 IIFE功能。
/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);
    });
  }
})();

在我的 Ruby on Rails application.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();
    }
});

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

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

如何正确地从 src/typed.js 文件中导出代码，将其导入到 application.js 文件中，然后在 EventListener 块中执行它？我什至需要在 src/typed.js 文件中使用 IIFE 吗？
我的尝试:我从 src/typed.js 文件中复制了所有代码并将其粘贴到 EventListener 块中，它运行良好。但是，我想保留 src/typed.js 文件，因为我有更多这些类型的文件用于其他 node_module 功能。

Answer 1

好的，我让它像这样工作，但请告诉我是否有更好的方法来做到这一点。
我将 src/typed.js 文件更改为下面的文件，去掉了 IIFE，重要的是，我从这个文件中导入了核心类:

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

});