使用TypeScript/ES6模块系统时出现404错误求助

错误核心原因 #

出现404的关键问题集中在三点：

• TS未编译为JS：浏览器无法直接解析.ts文件，必须先将TypeScript代码编译为JavaScript，否则找不到可执行文件。
• 导入路径缺少扩展名：浏览器ES模块要求导入时必须指定完整文件扩展名（如.js），仅写./script1会导致路径识别失败。
• HTML重复引入依赖：script2.js已通过导入语句加载script1.js，HTML中无需再单独引入script1.js，避免加载冲突。

具体修复步骤 #

1. 编译TypeScript文件 #

先确保安装了TypeScript，执行编译命令：

tsc scripts/script1.ts scripts/script2.ts

推荐创建tsconfig.json统一配置编译规则：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "outDir": "./scripts"
  },
  "include": ["scripts/*.ts"]
}

之后只需执行tsc命令，即可自动编译所有指定的.ts文件。

2. 修正导入语句的路径 #

修改script2.ts中的导入代码，添加.js扩展名：

import { myName } from "./script1.js";
console.log(myName);

编译后的script2.js会保留正确路径，浏览器能准确找到目标文件。

3. 调整HTML的脚本引入 #

仅保留script2.js的引入即可，它会自动加载依赖的script1.js：

<body>
  <script src="./scripts/script2.js" type="module"></script>
</body>

验证流程 #

1. 重新编译TS文件，确认scripts目录下生成了对应的script1.js和script2.js。
2. 启动本地服务器（ES模块需HTTP环境，可使用npx serve命令）。
3. 打开浏览器查看开发者工具，确认无404请求，控制台正常输出Saad Ali。

内容的提问来源于stack exchange，提问作者Saad