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

Question

我有一个带有Webpacker的Ruby on Rails 6应用程序。我正在实现一个现有的引导主题，该主题不是为 Webpacker 开发的。

该主题将node_modules用于各种JavaScript功能。该主题还具有许多小JavaScript文件，这些文件指定选项并触发各种node_modules的执行。我有一个来自Typed.js功能主题的JavaScript文件，可以在动画中键入句子。该文件包含一个 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应用程序.js文件中，我像这样加载node_module类。请注意，这里的"typed.js"文件不是我的src/typed.js文件 - 两件不同的事情：

File/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 文件中导出代码，将其导入应用程序.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 ...
}

然后，在应用程序.js文件中，我执行以下操作：

import typed from '../src/typed.js';
document.addEventListener("turbolinks:load", () => {
typed();
});