导入js中的变量

问题描述

config.js 定义变量

const baseUrl = "http://localhost:8081";
export default baseUrl;

american-data.js 使用变量

import baseUrl from "./config.js";
console.log("baseUrl", baseUrl);

American.html 使用模块

// 使用这个模块
<script type="text/javascript"   src="../js/America-data.js"></script>

但是报错了:
在这里插入图片描述

问题解决

这个错误通常表示你正在尝试在一个非模块化的环境中使用 import 语句,而 import 语句只能在 ES6 模块中使用。

确保你的 JavaScript 文件是一个模块,你可以通过在文件中添加 type="module" 的方式来声明:

<script type="module" src="main.js"></script>

或者,如果你是在 Node.js 环境中使用 ES6 模块,你需要确保文件扩展名为 .mjs,或者在 package.json 中设置 "type": "module"

确保你的环境支持 ES6 模块,并正确设置了文件类型或环境配置,以便使用 import 语句。

所以改成:

 <script type="module" src="../js/America-data.js"></script>

原因

<script type="module" src="../js/America-data.js"></script>
<script type="text/javascript" src="../js/America-data.js"></script> 有什么区别???

在 HTML 中,<script> 标签的 type 属性用于指定脚本的内容类型。常见的类型包括:

  • text/javascript: 默认的脚本类型,适用于 JavaScript。
  • module: 指示脚本是一个 ES6 模块,支持使用 importexport 关键字。

现在来解释这两种不同的 script 标签的区别:

  1. <script type="module" src="../js/America-data.js"></script>:

    • 这个标签告诉浏览器,America-data.js 是一个 ES6 模块。
    • 浏览器会按照模块的方式加载和执行该脚本,意味着它会创建一个单独的作用域,并且支持使用 importexport 语法。
    • 该脚本内部的所有 import 语句都会被视为模块的导入,而不是普通的脚本引入。
  2. <script type="text/javascript" src="../js/America-data.js"></script>:

    • 这个标签告诉浏览器,America-data.js 是普通的 JavaScript 脚本。
    • 浏览器会按照传统的方式加载和执行该脚本,脚本内部的所有代码都在相同的全局作用域中运行。
    • 不支持使用 importexport,而是使用传统的全局变量和函数引入方法。

因此,如果 America-data.js 是一个 ES6 模块,你应该使用第一个 <script> 标签;如果它是一个传统的 JavaScript 脚本,你可以使用第二个标签。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/660124.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

想要接触网络安全,应该怎么入门学习?

作为一个网络安全新手&#xff0c;首先你要明确以下几点&#xff1a; 我刚入门网络安全&#xff0c;该怎么学&#xff1f;要学哪些东西&#xff1f;有哪些方向&#xff1f;怎么选&#xff1f;这一行职业前景如何&#xff1f; 其次&#xff0c;如果你现在不清楚学什么的话&…

Postgresql 从小白到高手 十一 :数据迁移ETL方案

文章目录 Postgresql 数据迁移ETL方案1、Pg 同类型数据库2 、Pg 和 不同数据库 Postgresql 数据迁移ETL方案 1、Pg 同类型数据库 备份 : pg_dump -U username -d dbname -f backup.sql插入数据&#xff1a; psql -U username -d dbname -f backup.sqlpg_restore -U username…

Airmail 5 for Mac:高效电子邮件管理软件

Airmail 5 for Mac作为一款功能强大的电子邮件客户端软件&#xff0c;为Mac用户带来了全新的邮件管理体验。其高效、直观的操作界面&#xff0c;使得用户可以轻松管理各类邮件&#xff0c;提升工作效率。 Airmail 5 for Mac v5.7.4中文激活版 首先&#xff0c;Airmail 5支持多个…

Redis(七) zset有序集合类型

文章目录 前言命令ZADDZCARDZCOUNTZRANGEZREVRANGEZRANGEBYSCOREZPOPMAXZPOPMIN两个阻塞版本的POP命令BZPOPMAX BZPOPMINZRANKZREVRANKZSCOREZREMZREMRANGEBYRANKZREMRANGEBYSCOREZINCRBY集合间操作ZINTERSTOREZUNIONSTORE 命令小结 内部编码使用场景 前言 对于有序集合这个名…

下一代云原生应用引擎OpenNJet体验

文章目录 前言OpenNJet 介绍OpenNJet VS NGINXOpenNJet 安装OpenNJet 动态配置体验动态location动态黑名单动态灰度发布 体验感受 前言 作为一名技术人员&#xff0c;我们应时刻保持对行业动态的关注&#xff0c;今天我们就来体验一下号称下一代云原生应用引擎OpenNJet。 Ope…

Python urllib 爬虫入门(2)

本文为Python urllib类库爬虫更入门的一些操作和爬虫实例及源码。 目录 模拟浏览器请求 简单模拟 设置随机user-agent 请求超时 HTTP请求类型 Get请求 Post请求 抓取网页动态请求 封装ajax请求 调用 循环调用 抓取小说 封装请求函数 把html写入本地分析 调用 正…

JWT是什么?如何使用?

JWT是什么&#xff1f;如何使用&#xff1f; 前言什么是JWT&#xff1f;概念工作方式JWT的组成HeaderPayloadSignatrue 实战引入依赖自定义注解定义实体类定义一个JWT工具类业务校验并生成token定义拦截器配置拦截器定义接口方法并添加注解开始验证 使用场景注意事项 JWT与传统…

2024最新的,免费的 ChatGPT 网站AI(八个)

ChatGPT是美国人工智能研究实验室OpenAI在2022年11月推出的一款人工智能技术驱动的语言模型应用。它基于GPT-3.5架构&#xff08;后续还有GPT-4架构的升级版&#xff09;构建&#xff0c;拥有强大的自然语言处理能力和上下文理解能力&#xff0c;能够参与多轮对话&#xff0c;为…

【RAG 博客】Haystack 中的 DiversityRanker 与 LostInMiddleRanker 用来增强 RAG pipelines

Blog&#xff1a;Enhancing RAG Pipelines in Haystack: Introducing DiversityRanker and LostInTheMiddleRanker ⭐⭐⭐⭐ 文章目录 Haystack 是什么1. DiversityRanker2. LostInTheMiddleRanker使用示例 这篇 blog 介绍了什么是 Haystack&#xff0c;以及如何在 Haystack 框…

上位机图像处理和嵌入式模块部署(树莓派4b开机界面程序自启动)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们学习了如何在树莓派4b上面开发qt&#xff0c;也学习了如何用/etc/rc.local启动控制台程序&#xff0c;那今天我们继续学习一下如何利用树莓…

PotatoPie 4.0 实验教程(35) —— FPGA实现摄像头图像二值化膨胀效果

手机扫码 链接直达 https://item.taobao.com/item.htm?ftt&id776516984361 什么是图像二值化膨胀&#xff0c;有什么作用&#xff1f; 图像二值化膨胀是图像处理中的一种基本操作&#xff0c;它用于扩展和增强二值图像中的白色区域。具体而言&#xff0c;二值化膨胀操作…

【VSCode调试技巧】Pytorch分布式训练调试

最近遇到个头疼的问题&#xff0c;对于单机多卡的训练脚本&#xff0c;不知道如何使用VSCode进行Debug。 解决方案&#xff1a; 1、找到控制分布式训练的启动脚本&#xff0c;在自己的虚拟环境的/lib/python3.9/site-packages/torch/distributed/launch.py中 2、配置launch.…