Javascript 如何使ES6模块导出的函数在dom中可用？

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

在app.js中，我有

导入{
slideToGetCode，
}来自“./animations.js”；

在模块animations.js中，我有：

常量slideToGetCode=（）=>{
setUsernameOnAccountRecovery（）；
设置超时（（）=>{
const loginContainerSlider=clearAnimationStates（）；
loginContainerSlider.classList.add（'slide-left-recover'）；
}, 250);                                                                                                
};
出口{
slideToGetCode，
};

在index.html中，我有

忘记密码了？

---

但是，当我单击按钮时，我得到

（索引）：171未捕获引用错误：slideToGetCode未定义。如何从ES6模块使dom中的
slideToGetCode（）
可用
 首先，我真的觉得忘记密码和任何其他按钮都应该作为组件提供，而不是硬编码到
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>


忘记密码了？

希望有帮助。
首先，我真的觉得忘记密码和其他按钮应该作为组件提供，而不是硬编码到
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>


忘记密码了？

希望有帮助。
您也可以更新
app.js
a la:

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

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

这将允许您不必挂起
窗口的任何内容，也不必在HTML中放置任何事件侦听器。
您还可以更新
app.js
a la:

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

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

这将允许您不必挂起
窗口的任何内容，也不必在HTML中放置任何事件侦听器