HTML引入Typescript编译JS文件 :Uncaught ReferenceError: exports is not defined

news2024/12/29 9:42:50

初学TypeScript,尝试在html引入ts编译出来的js文件:

报错:Uncaught ReferenceError: exports is not defined

以下是代码:

创建了TS:加入export {}形成独立的作用域,其他ts文件重复声明相同名称的变量。

export {}
let str = "tt";
// str=22 //类型不对,编辑器IDE会提示错误

let a:string="44"
console.log(str)

tsconfig.json配置:

/* Modules */
"module": "commonjs",    

编译之后生成js:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
let str = "tt";
// str=22 //类型不对,编辑器IDE会提示错误
let a = "44";
console.log(str);

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="01-基础.js"></script>
</head>
<body>

</body>
</html>

运行时报错:Uncaught ReferenceError: exports is not defined。

解决步骤:

  说是要配置生成ESXX,我把生成模块类型改成ES2020版本了。

tsconfig.json配置:

/* Modules */
"module": "ES2020", 

再次运行报错:

Uncaught SyntaxError: export declarations may only appear at top level of a module

引入类型设置为module

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module" src="01-基础.js"></script>
</head>
<body>

</body>
</html>

再次运行OK:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python和Java二选一该学啥?

首先我们需要了解Python和 Java分别是什么 根据IEEE Spectrum 2022年编程语言排名前十的分别是&#xff1a;Python&#xff0c;C&#xff0c;C&#xff0c;C#&#xff0c;Java&#xff0c;SQL&#xff0c;JavaScript&#xff0c;R&#xff0c;HTML&#xff0c;TypeScript。从该…

专访丨AWS量子网络中心科学家Antía Lamas谈量子计算

​ Anta Lamas Linares&#xff08;图片来源&#xff1a;网络&#xff09; 47岁的Anta Lamas Linares出生于西班牙西北部的圣地亚哥德孔波斯特拉。她在当地学习物理学&#xff0c;然后在牛津大学和加利福尼亚继续深造。后来&#xff0c;她在新加坡领导了亚马逊网络服务&#xf…

Java中线程的常用操作-后台线程、自定义线程工厂ThreadFactpry、join加入一个线程、线程异常捕获

场景 Java中Thread类的常用API以及使用示例&#xff1a; Java中Thread类的常用API以及使用示例_霸道流氓气质的博客-CSDN博客 上面讲了Thread的常用API&#xff0c;下面记录下线程的一些常用操作。 注&#xff1a; 博客&#xff1a;霸道流氓气质的博客_CSDN博客-C#,架构之…

Doris(4):建表

可以通过在mysql-client中执行以下 help 命令获得更多帮助&#xff1a; help create table 1 基本概念 在 Doris 中&#xff0c;数据都以表&#xff08;Table&#xff09;的形式进行逻辑上的描述。 1.1 Row & Column 一张表包括行&#xff08;Row&#xff09;和列&#…

从零开始:如何集成美颜SDK到你的应用中

现在&#xff0c;随着人们对于美的追求不断提升&#xff0c;美颜应用已经成为了人们生活中不可或缺的一部分。在应用中&#xff0c;美颜功能的实现离不开美颜SDK的支持。那么&#xff0c;如何集成美颜SDK到你的应用中呢&#xff1f;下面&#xff0c;我们就来一步步了解。 第一…

Linux复习 / 线程相关----线程互斥 QA梳理

文章目录前言线程互斥Q&#xff1a;什么是临界资源&#xff1f;临界区呢&#xff1f;Q&#xff1a;什么是互斥&#xff1f;Q&#xff1a;数据不一致的本质是什么&#xff1f;Q&#xff1a;用锁对共享资源进行保护的前提是&#xff1a;锁也要作为共享资源被其他线程使用。那么用…

独家 | 招商银行:玩转校园招聘新方式 挖掘金融科技新人才

数字经济时代&#xff0c;金融科技人才队伍的引进与培养是招商银行人才体系建设的关键任务。 01.金融科技校招2大核心课题 招商银行数字化转型过程中&#xff0c;线上化、生态化、平台化、智能化、数据化全面加速发展&#xff0c;对人才队伍能力提出新要求。 2大核心课题&am…

Git的一些使用

虽然说这也不是啥重要的内容&#xff0c;但是作为计算机人也得学学&#xff0c;了解了解。 一些预备内容 首先得下载git&#xff0c;这个就不多说了。 安装完了之后&#xff0c;首先要做的就是设置用户名称和邮箱地址&#xff0c;因为每次Git提交都会使用该信息&#xff0c;…

I.MX6ULL_Linux_驱动篇(33) pinctrl与gpio子系统

上一章我们编写了基于设备树的 LED 驱动&#xff0c;但是驱动的本质还是没变&#xff0c;都是配置 LED 灯所使用的 GPIO 寄存器&#xff0c;驱动开发方式和裸机基本没啥区别。 Linux 是一个庞大而完善的系统&#xff0c;尤其是驱动框架&#xff0c;像 GPIO 这种最基本的驱动不可…

Linux实战学习

文章目录一、Linux权限信息权限控制信息chmodifconfigpingnmap netstatps killzip unzip常用快捷键二、搭建Java环境yumJDKTomcatMysql三、部署Web项目到服务器一、Linux权限信息 Linux中&#xff0c;拥有最大权限的账户为: root(超级管理员)&#xff0c;而普通用户在很多地方…

UWB成为智慧工厂时代的代表技术

UWB成为智慧工厂时代的代表技术 随着智慧工厂的到来&#xff0c;在人员安全问题较为重要的行业中&#xff0c;为了避免人员安全事故的出现&#xff0c;各家企业都逐步装备了UWB定位系统。UWB信号的辐射非常低&#xff0c;通常只有手机辐射的千分之一&#xff0c;因此在工业上应…

【 Spring MVC 核心功能(二) - 获取参数(上)】

文章目录一、获取单个参数二、获取多个参数三、获取对象四、后端参数重命名4.1 使用 RequestParam 重命名参数4.2 RequestParam 中参数必传4.3 设置非必传参数五、使用 PathVariable 获取URL中参数一、获取单个参数 在 Spring MVC 中可以直接⽤⽅法中的参数来实现传单个参&…

uni-app:登录与支付-- 三秒后自动跳转

三秒后自动跳转 三秒后自动跳转到登录页面 需求描述&#xff1a;在购物车页面&#xff0c;当用户点击 “结算” 按钮时&#xff0c;如果用户没有登录&#xff0c;则 3 秒后自动跳转到登录页面 在 my-settle 组件的 methods 节点中&#xff0c;声明一个叫做 showTips 的方法&am…

Vue:生命周期

1、定义 生命周期函数&#xff08;俗称&#xff1a;钩子函数&#xff09; 根据vue整个渲染机制&#xff0c;在渲染的每个关键点上&#xff0c;提供对应的函数&#xff0c;进行一些相关的业务操作。 2、四个阶段 初始阶段&#xff1a;beforeCreate()&#xff1a;可以加loadi…

vue-qr 生成二维码-使用

1、vue-qr官网说明 vue-qr - npm 2、使用 2.1 安装 vue-qr npm install vue-qr --save 2.2 代码 import vueQr from vue-qr; <el-dialog title"摘要" :visible.sync"openSummary" width"700px" append-to-body> <el-row> <el…

Oracle基础(表空间、用户、授权、表、数据类型、数据导入导出等)

Oracle基础(表空间、用户、授权、表、数据类型、数据导入导出等1 创建表空间1.1 概述1.2 语法&#xff1a;1.3 示例&#xff1a;2 创建用户2.1 语法2.2 示例2.3 用户授权类型3 表的创建、修改、删除3.1 表创建3.1.1 概述3.1.2 语法3.1.3 示例3.1.4 表的数据类型3.2 表修改3.2.1…

Oracle系列之七:表的创建与管理

Oracle表的创建与管理1. 表的创建2. 表的修改3. 表中数据的增删改查4. 表的Merge5. 表的删除6. 表的重命名7. 表的索引8. 表的约束9. dual表表是Oracle数据库中最基础的存储对象&#xff0c;用于存储数据。本文主要介绍了Oracle表的创建与管理&#xff0c;包括表的创建、修改、…

图像处理:双边滤波算法

今天主要是回顾一下双边滤波&#xff0c;我曾经在这篇——图像处理&#xff1a;推导五种滤波算法中推导过它&#xff0c;其中包含了我自己写的草稿图。 目录 双边滤波算法原理 &#xff08;1&#xff09;空间域核 &#xff08;2&#xff09;值域核 理解双边滤波 空域权重​…

Reactor模型在库存指令模块中的运用

Reactor是一种高性能网络模型&#xff0c;在netty、redis、nginx、kafaka、memcached等重要组件&#xff0c;以及唯品会自研的OSP框架都有应用&#xff0c;Reactor模型在提升性能和解耦方面都做得非常好&#xff0c;其编程思想也可以运用到业务系统的开发当中&#xff0c;本文主…

VUE:常见的面试题和答案

1. Vue组件的生命周期有哪些&#xff0c;它们的执行顺序是什么? 答&#xff1a;Vue组件的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等。它们的执行顺序如下&#xff1a; beforeCreate -> created ->…