ts 编译运行时，为何没有正确加载 Javascript 文件？

是 feature 不是 bug ，参见
https://github.com/microsoft/TypeScript/issues/16577
你这个情况可以考虑自己对编译后的文件二次处理，或者在你的服务器上做 rewrite

用什么工具编译的

@leokun 执行`npx tsc`，编译 Typescript 生成的 Javascript 脚本。

main.ts 里把
import { Game } from './game';
改为
import { Game } from './game.js';

@gucheen 感谢，我通过 nginx 配置解决了。但是 nginx 配置看着有点懵懵的。nginx 配置如下

```
server {
listen 80;

# 指定允许跨域的方法，*代表所有
add_header Access-Control-Allow-Methods *;

# 预检命令的缓存，如果不缓存每次会发送两次请求
add_header Access-Control-Max-Age 3600;
# 带 cookie 请求需要加上这个字段，并设置为 true
add_header Access-Control-Allow-Credentials true;

# 表示允许这个域跨域调用（客户端发送请求的域名和端口）
# $http_origin 动态获取请求客户端请求的域 不用*的原因是带 cookie 的请求不支持*号
add_header Access-Control-Allow-Origin $http_origin;

# 表示请求头的字段 动态获取
add_header Access-Control-Allow-Headers
$http_access_control_request_headers;

# OPTIONS 预检命令，预检命令通过时才发送请求
# 检查请求的类型是不是预检命令
if ($request_method = OPTIONS){
return 200;
}

location / {
root C:/Users/Intel/Desktop/snake_game;
index index.html index.htm;

# 处理 /bin 目录下的请求
location /bin/ {
# 如果请求的路径具有任意后缀名文件，则不进行重写
location ~* \..+$ {
# 指定允许跨域的方法，*代表所有
add_header Access-Control-Allow-Methods *;

# 预检命令的缓存，如果不缓存每次会发送两次请求
add_header Access-Control-Max-Age 3600;
# 带 cookie 请求需要加上这个字段，并设置为 true
add_header Access-Control-Allow-Credentials true;

# 表示允许这个域跨域调用（客户端发送请求的域名和端口）
# $http_origin 动态获取请求客户端请求的域 不用*的原因是带 cookie 的请求不支持*号
add_header Access-Control-Allow-Origin $http_origin;

# 表示请求头的字段 动态获取
add_header Access-Control-Allow-Headers
$http_access_control_request_headers;

# OPTIONS 预检命令，预检命令通过时才发送请求
# 检查请求的类型是不是预检命令
if ($request_method = OPTIONS){
return 200;
}

break;
}

# 如果请求的文件不带后缀名，则增加 js ，则进行重写
rewrite ^/bin/(.*)$ /bin/$1.js break;

# 如果请求的是不存在的文件，则返回 404 错误
try_files $uri =404;
}
}
}
# 关闭后台执行
daemon off;
```

@z888888cn tsc 不太适合 web 工具库的构建，例如路径别名(path)和拓展名都不支持
ts 库的选择 tsup 或者 rollup ，前者用 tsc 构建 d.ts ，用 esbuild 构建 js
web 应用就很多选择了，vite 、webpack 等

如果想要在 node 直接运行 ts ，tsx(不是 react 的 tsx)也是不错的选择

@leokun 非常感谢，我用 rollup 编译 ts 脚本，超级方便。