Как сделать экспортированную функцию модуля ES6 доступной в домене?

Question

Я использую модули ES6 в Chrome. У меня есть простое приложение, использующее vanilla html, JS и компоненты материалов для веб-сайтов.

В приложении. js У меня

import {
  slideToGetCode,
} from './animations.js';

в модуле анимации. js, у меня есть:

const slideToGetCode = () => {                                                                            
  setUsernameOnAccountRecovery();                                                                         

  setTimeout(() => {
    const loginContainerSlider = clearAnimationStates();                                                  
    loginContainerSlider.classList.add('slide-left-recover');                                             
  }, 250);                                                                                                
};


export {
  slideToGetCode,
};

В индексе. html , У меня есть

<script type="module" src="js/app.js"></script>
<script type="module" src="js/animations.js"></script>
<button "mdc-button" onclick="slideToGetCode()">Forgot Password?</button>

Тем не менее, я получаю (index):171 Uncaught ReferenceError: slideToGetCode is not defined, когда нажимаю на кнопку. Как я могу сделать slideToGetCode() доступным в DOM из модуля ES6?

Answer 1

Вы также можете обновить app.js a la:

import {
  slideToGetCode,
} from './animations.js';

const button = document.querySelector('button');
button.addEventListener('click', sideToGetCode);

, что позволит вам не зависать от window и не помещать прослушиватели событий в HTML.

Answer 2

Во-первых, я искренне чувствую, что Forgot Password и любая другая кнопка должны быть компонентами, а не жестко запрограммированы в index.html файле.

Однако я думаю, что ниже должно работать. См. Предлагаемые изменения в файле animations.js.

Файл animations.js.

const slideToGetCode = () => {                                                                            
  setUsernameOnAccountRecovery();                                                                         

  setTimeout(() => {
    const loginContainerSlider = clearAnimationStates();                                                  
    loginContainerSlider.classList.add('slide-left-recover');                                             
  }, 250);                                                                                                
};

window.slideToGetCode = slideToGetCode;
export {
  slideToGetCode,
};

Файл index.html

<script src="js/animations.js"></script>
<button "mdc-button" onclick="() => slideToGetCode()">Forgot Password?</button>

Надеюсь, это поможет.