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

【问题标题】：JS import module and run on page loadJS 导入模块并在页面加载时运行
【发布时间】：2020-04-05 19:00:26
【问题描述】：

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

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 onload="main()">
  </body>
</html>

generateObject.js：

export function hello() {
    return "Hello";
}

main.js：

import { hello } from './generateObject.js';
function main(){
      console.log(hello());
}

main();

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

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)

【问题讨论】：

您是否在 main.js 文件中调用该函数？在 main.js 文件的末尾执行此操作main()
但我想在页面加载和html正文中调用它：onload="main()"
提供一个工作代码 sn-p 作为您尝试过的。在不了解上下文的情况下很难发表评论。
好的，我编辑了帖子，添加了 html 代码和 chrome 错误
我已经回答了你的问题。检查它是否能解决您的问题

标签： javascript import module export

【解决方案1】：

模块将有自己的范围。它们不像普通脚本那样在全局范围内可用。因此，在您的情况下，它只能在 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.js

import { hello } from './generateObject.js';
function main(){
      console.log(hello());
} 

window.addEventListener('load', main)

【讨论】：

谢谢，我使用了 window.addEventListener('load', main) 并修复了第二个错误，但首先 (Uncaught SyntaxError: Cannot use import statement outside a module (main.js:1)) 是还在那里，你知道出了什么问题吗？
将 main.js 引用更改为 <script type="module" src="main.js"></script>
:D 它在 chrome 中带来了另外两个问题：从原点“null”访问“file:///D:/Programming/.Playground/gameInJS/main.js”处的脚本已被阻止通过 CORS 策略：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。和 GET file:///D:/Programming/.Playground/gameInJS/main.js net::ERR_FAILED
这是一个 CROS 错误。你将不得不运行一个服务器。按照这个创建一个服务器 https://www.w3schools.com/nodejs/nodejs_http.asp 或安装一个 npm 包，如 http-server

【解决方案2】：

generateObject.js:

export function hello() {
    return "Hello";
}

main.js:

import { hello } from './generateObject.js';
function main(){
      console.log(hello());
} 

main();

Working example

【讨论】：

不幸的是它没有帮助：/
嗯。尝试使用window.onload。这是代码：codesandbox.io/s/priceless-cdn-b686p
我收集示例正在工作，因为它们使用 Parcel（在 codesandbox.io 上看起来是默认值）并且正如 https://parceljs.org/getting_started.html#?-getting-started 下的注释所说：“Parcel 将 JS 资产转换为 ES5，它不会在在 <script type="module"> 标记的上下文中，因此只需在源 HTML 中使用没有 type 属性的普通 <script> 标记。”虽然我没有检查 299 kB 缩小的源代码，但我确信只是使用“ES5”而不是 import 进行替换，这一切都可以正常工作。

【解决方案3】：

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

【讨论】：

不幸的是它不工作，在 chrome 控制台中仍然有同样的错误：/