不使用Node.js，如何用TypeScript简洁集成WebAssembly？

针对你的需求，我推荐一套基于wasm-pack的web目标和TypeScript原生ES模块支持的方案，完全不需要额外Node.js工具链（仅需tsc编译TypeScript），还能解决你提到的重复glue文件问题：

1. 调整wasm-pack编译目标 #

首先，用--target web参数编译你的Rust Wasm项目，这个目标是专门为浏览器环境设计的，生成的glue代码无Node.js依赖，且输出结构清晰。同时直接指定输出目录到Actix-Web的静态文件目录，彻底避免手动移动文件：

wasm-pack build --target web --out-dir ./static/wasm --release

• --target web: 生成浏览器兼容的ES模块格式glue代码
• --out-dir ./static/wasm: 将编译产物直接输出到Actix-Web的静态文件夹（假设你的静态文件根目录是./static）
• --release: 生产环境编译，可选但推荐

这一步会生成四个核心文件：

• network_calculator_lib.js: 浏览器友好的glue代码
• network_calculator_lib_bg.wasm: Wasm二进制文件
• network_calculator_lib.d.ts: TypeScript类型定义文件
• package.json: 自动生成的包描述（可选保留）

这样就不会出现重复glue文件了——因为你指定了唯一的输出目录，wasm-pack默认允许覆盖旧文件，解决了你之前的目录冲突问题。

2. 配置TypeScript #

修改你的tsconfig.json，适配ES模块和Wasm导入，无需开启allowJs（除非你有其他独立JS代码依赖）：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "target": "ES2020",
    "strict": true,
    "resolveJsonModule": true,
    "include": ["./src/**/*", "./static/wasm/**/*.d.ts"]
  }
}

• module: ESNext: 启用ES模块支持，这是直接导入Wasm的前提
• moduleResolution: Bundler: 让TypeScript理解浏览器/打包器的模块解析规则（比如?url导入语法）
• include: 将wasm-pack生成的类型定义文件纳入TS编译范围，获得完整的类型提示

3. 在TypeScript中直接导入并使用Wasm #

现在可以在TS文件中直接导入glue代码和Wasm文件，通过?url后缀告诉TS把Wasm文件当作URL资源处理：

// 导入wasm-pack生成的初始化函数
import initWasm from '../static/wasm/network_calculator_lib.js';
// 导入Wasm文件的URL（注意?url后缀）
import wasmBinaryUrl from '../static/wasm/network_calculator_lib_bg.wasm?url';

async function initializeWasm() {
  // 初始化Wasm，传入Wasm二进制文件的URL
  const wasmInstance = await initWasm(wasmBinaryUrl);
  
  // 调用Wasm导出的函数，示例：
  const result = wasmInstance.calculate_network_stats(/* 传入你的参数 */);
  console.log('网络计算结果:', result);
}

// 页面加载时初始化Wasm
document.addEventListener('DOMContentLoaded', initializeWasm);

4. 配置Actix-Web静态文件服务 #

确保你的Actix-Web项目正确配置静态文件路由，让浏览器能访问到./static目录下的Wasm文件：

use actix_files::Files;
use actix_web::{App, HttpServer, HttpResponse, get};

// 示例路由：返回前端页面
#[get("/")]
async fn index() -> HttpResponse {
    HttpResponse::Ok()
        .content_type("text/html")
        .body(include_str!("../static/index.html"))
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            // 映射/static路径到本地./static文件夹
            .service(Files::new("/static", "./static").prefer_utf8(true))
            .service(index)
    })
    .bind(("127.0.0.1", 8080))?
    .run()
    .await
}

额外说明 #

• 如果你不想依赖glue文件，也可以直接用浏览器原生的WebAssembly.instantiateStreaming加载Wasm，但需要自己处理类型定义和内存交互，复杂度更高。wasm-pack生成的glue和d.ts文件能帮你省掉大量手动工作，且类型提示更完善。
• 编译TS到JS时，直接用tsc命令即可，不需要任何打包工具（比如Webpack），因为我们用的是原生ES模块，现代浏览器完全支持。

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