Blazor WASM中使用TypeScript导入three.js时的问题求助

一、解决TypeScript中找不到'three'模块的问题 #

• 安装three的类型定义（新版three自带类型，但部分场景需手动补充）：

  npm install @types/three --save-dev
  

• 调整tsconfig.json配置，让TypeScript正确识别npm模块：

  {
    "compilerOptions": {
      "moduleResolution": "node",
      "baseUrl": ".",
      "paths": {
        "*": ["node_modules/*"]
      },
      "target": "ESNext",
      "module": "ESNext",
      "outDir": "./wwwroot/js",
      "strict": true
    },
    "include": ["./Scripts/**/*.ts"],
    "exclude": ["node_modules"]
  }
  

• 确认项目.csproj中的TypeScript编译配置：

  <PropertyGroup>
    <TypeScriptOutDir>wwwroot/js</TypeScriptOutDir>
    <TypeScriptModuleKind>ESNext</TypeScriptModuleKind>
  </PropertyGroup>
  <ItemGroup>
    <TypeScriptCompile Include="Scripts/**/*.ts" />
  </ItemGroup>
  

• 清理项目重新构建：删除bin、obj目录，执行npm install确保依赖齐全，再运行dotnet build。

二、解决JS文件导入时的"Unexpected identifier 'as'"错误 #

该错误是因为浏览器将JS文件当作普通脚本而非ES模块处理，无法识别模块导入语法，可通过以下方式解决：

• 方式一：通过IJSRuntime加载ES模块
  在Blazor组件中使用IJSRuntime异步导入模块，避免直接在index.html中引用：

  @inject IJSRuntime JS
  @implements IAsyncDisposable
  
  @code {
    private IJSObjectReference? threeModule;
  
    protected override async Task OnInitializedAsync()
    {
      threeModule = await JS.InvokeAsync<IJSObjectReference>("import", "./js/your-three-script.js");
      // 调用脚本中的方法，例如：await threeModule.InvokeVoidAsync("initScene");
    }
  
    public async ValueTask DisposeAsync()
    {
      if (threeModule != null)
      {
        await threeModule.DisposeAsync();
      }
    }
  }
  

  确保编译后的JS文件输出到wwwroot/js目录，且保持ES模块语法。

• 方式二：将脚本声明为模块
  若需在index.html中引用脚本，必须添加type="module"属性：

  <script type="module" src="js/your-three-script.js"></script>
  

  注意：此方式下脚本中导入three的路径需符合浏览器模块解析规则，若依赖node_modules中的包，建议搭配打包工具（如Vite、Webpack）处理路径问题。

额外建议 #

若上述方法仍无效，可尝试用Vite等打包工具将TS代码与three依赖打包为独立JS文件，再引入Blazor项目，这种方式能更高效地处理模块依赖关系。

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