javascript - 如何使 ES6 Module 导出的函数在 dom 中可用？

Question

我在 Chrome 中使用 ES6 模块。我有一个简单的前端应用程序，仅使用普通 html、JS 和 web Material 组件。

在 app.js 中我有

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

在模块animations.js中，我有:

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

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


export {
  slideToGetCode,
};

在index.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: slipToGetCode is not Defined 。如何使 ES6 模块中的 dom 中可用 slideToGetCode() ？

Answer 1

您还可以更新app.js:

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

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

这将允许您不必将任何东西卡在窗口上或将任何事件监听器放入 HTML 中。