JS导入模块并在页面加载时运行
我想调用我的函数main（）使用html onload事件和console.log文本导入从另一个（生成Object.js）文件，但当我导入函数，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>
生成对象。js:
export function hello() {
return "Hello";
}
main.js：
import { hello } from './generateObject.js';
function main(){
console.log(hello());
}
main();
当我尝试控制台时。main（）中的log（“text”）可以正常工作，但当我尝试使用导入的函数时却不行。我该怎么做才能解决这个问题？
Chrome控制台中的错误：
未捕获的语法错误：无法在模块外部使用导入语句（main.js:1）
指数html:8未捕获引用错误：未在onload（index.html:8）中定义main
共有3个答案
您应该在main.js末尾添加对main函数的调用。尝试在文件底部写入main（）；。
export function hello() {
return "Hello";
}
import { hello } from './generateObject.js';
function main(){
console.log(hello());
}
main();
工作示例
模块将有自己的范围。它们不像普通脚本那样在全局范围内可用。因此，它只能在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)
-
本文向大家介绍详解JS模块导入导出，包括了详解JS模块导入导出的使用技巧和注意事项，需要的朋友参考一下 开发中基本不会将所有的业务逻辑代码放在一个JS文件中，特别是在使用前端框架，进行组件化开发中时，会复用相应的组件。这时，就会用到模块导入/导出的方法了。 当然，上面提到有模块的概念，也是在JS用于服务器端编程的时候才会出现，我们在使用前端框架时，使用npm run dev,不就是启动了一个nod
-
我正在使用JSF构建一个网站。我想在每次加载Facelet页面时运行一段代码，我需要使用会话范围支持bean。我尝试使用backingbean的构造函数来运行代码块，但它只是第一次运行，我使用了以下代码 由于是会话作用域，因此它在加载页面时第一次运行构造函数。 当页面加载时（不仅仅是第一次加载），是否还有其他方法可以运行代码块？
-
问题内容： 我正在编写一个小脚本，该脚本从目录获取文件名，并将其传递给另一个模块，然后该模块导入文件。 因此流程类似于1）获取模块名称（将其存储在变量中）2）将此变量名称传递给模块3）导入名称存储在变量名称中的模块 我的代码就像 问题在于，当它到达import语句时，它将modulename读取为真实的模块名称，而不是存储在此变量中的值。我不确定这在python中如何工作，解决这个问题的任何帮助都
-
我正在使用ReactJS和typescript创建一个概念验证项目的初始设置，我希望在其中包含CSS模块，而不必弹出网页包配置。 以下是我迄今为止遵循的步骤： > npm安装-g创建-反应-app 创建-反应-应用程序firstapp-脚本-版本=反应-脚本-ts npm安装react-app-重新连线-保存-dev npm安装-保存-开发代码块/react-app-rewire-css-模块sa
-
我是这个巴别塔的新成员，有一些在nodejs方面的经验。我的包裹。json文件有一个巴别塔 “@babel/preset-react”：“^7.10.4”、“@nuxtjs/eslint-config”：“^0.0.1”、“babel-cli”：“^6.26.0”， 这些依赖关系与巴别塔有关。从一些无法工作的开发人员那里得到了这个项目。安装依赖关系和其他东西后。当我试图通过nuxtjs运行项目给我
-
本文向大家介绍Nodejs模块载入运行原理，包括了Nodejs模块载入运行原理的使用技巧和注意事项，需要的朋友参考一下 前言 使用Nodejs，就不可避免地引用第三方模块，它们有些是Nodejs自带的（例：http，net...），有些是发布在npm上的（例：mssql，elasticsearch...） 本篇章聚焦3个问题： Nodejs模块的加载过程。 应用启动的过程。 应用如何加载依赖模块。