Особенности вызова функций после сборки проекта
 

Приветствую!

Допустим, был создан проект по шаблону (npx create-ol-app), работающий на Vite.

В главном файле проекта (main.js) была определена функция:

function echoTest(data){
  alert(data);
}

Вопрос, как её вызвать из файла index.html?
Vite при сборке оптимизирует код, применяя обфускацию, т.е. функции с таким именем уже нет...

Следующий код не рабочий:

<a href="#" onclick="echoTest('test msg');">click me</a>

P.S. вариант про присвоить id элементу, а затем подписать на событие - не предлагать, не подходит для решения задачи.

С точки зрения JS это модуль?

Выходит, что модуль, папка, package.json...

window.echoTest = echoTest;

Но правильно, на самом деле, так:

<a href="#" class="echo-link">click me</a>

document.querySelector('.echo-link').addEventListener('click', event => {
  event.preventDefault();
  echoTest('test msg')
})

А как отлавливать данные, допустим, если их 20 ссылок, и у каждой, допустим, есть id, как их отлавливать по-правильному?