JS 导入模块并在页面加载时运行

我想使用从另一个（generateObject.js）文件导入的html onload事件和console.log文本调用我的函数main（），但是当我导入函数时，onload事件停止工作并且不再使用函数main（）。

html:

<!DOCTYPE html>

<html>

<head>

</head>

</body>

</html>

生成对象.js：

export function hello() {

return "Hello";

}

主.js：

import { hello } from './generateObject.js';

function main(){

console.log(hello());

}

main();

当我尝试使用它时console.log("text")，main()它可以工作，但是当我尝试使用导入的函数时，它就不行了。我应该怎么做才能解决这个问题？

Chrome 控制台中的错误：

Uncaught SyntaxError: Cannot use import statement outside a module (main.js:1)

index.html:8 Uncaught ReferenceError: main is not defined at onload (index.html:8)

慕慕森

浏览 129回答 3

3回答

哈士奇WWW

模块将有自己的范围。它们不像普通脚本那样在全局范围内可用。所以它只能main.js在你的情况下访问。要使其工作，您需要将其显式添加到全局范围。import { hello } from './generateObject.js';function main(){      console.log(hello());}window.main = main;或者，您可以从 HTML 中删除事件处理程序并将其添加到 JS 文件中。html<!DOCTYPE html><html>  <head>    <script type="text/javascript" src="main.js"></script>    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  </head>  <body>  </body></html>main.jsimport { hello } from './generateObject.js';function main(){      console.log(hello());} window.addEventListener('load', main)

qq_笑_17

生成对象.js：export function hello() {    return "Hello";}主.js：import { hello } from './generateObject.js';function main(){      console.log(hello());} main();

茅侃侃

您应该在 main.js 的末尾添加对 main 函数的调用。试着写main();在文件的底部。

随时随地看视频慕课网APP