如何使dom中的ES6模块导出功能可用？

Question

我正在Chrome中使用ES6模块。我有一个简单的前端应用程序，仅使用香草html，JS和用于Web的材料组件。

在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: slideToGetCode is not defined。如何通过ES6模块在dom中使用slideToGetCode()？

Answer 1

首先，老实说，我忘记了密码和其他任何按钮都应该作为组件来使用，而不是硬编码在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>

希望有帮助。