Blazor 使用 typescript 并导入 Three.js

Question

我正在开发一个

Blazor WASM

应用程序，我在其中使用

Microsoft.TypeScript.MSBuild

nuget 包，以便对所有相关的 javascript 代码使用 typescript。

但是当涉及到导入和使用像 Three这样的外部js模块时，我无法从我的打字稿代码中导入或设置并使用它。

我尝试了几种方法，最后一种是通过 npm 安装它，但在我的 ts 文件中，导入中仍然存在构建错误，其中无法识别“三”：

import * as THREE from 'three';

(TS) 找不到模块“三”。您的意思是将“moduleResolution”选项设置为“nodenext”，还是将别名添加到“paths”选项？

从 tsconfig.json（不再使用）更改此设置不会导致此工作。

我还尝试从我为此目的设置的 JS 文件中使用它，当浏览器加载它时，我收到如下错误：

暴击：Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 渲染组件未处理的异常：意外的标识符“as” 语法错误：意外的标识符“as” Microsoft.JSInterop.JSException：意外的标识符“as” 语法错误：意外的标识符“as” 在 Microsoft.JSInterop.JSRuntime.d__16`1[[Microsoft.JSInterop.IJSObjectReference，Microsoft.JSInterop，版本=8.0.0.0，文化=中性，PublicKeyToken=adb9793829ddae60]].MoveNext()

我没有继续尝试的想法。另外，我在网上没有找到很多东西，我找到的所有示例都只使用一个 ts 文件，而不是导入 JS 模块。

Answer 1

我必须遵循几个步骤，不是关于代码，而是关于构建构建以及所有需要的上下文软件和配置文件。这是我为了让它发挥作用而遵循的快速描述：

1. 安装nuget包

   Microsoft.Typescript.MSBuild

   。这应该会自动将您的

   ts

   文件“转换”为

   js

   。也许在这里您需要创建和调整 tsconfig.json，或者您可能对

   project properties->Typescript

   部分为您提供的内容感到满意。
2. 安装

   node.js

   。请按照其官方网页上的说明进行操作。
3. 通过cmd（在Windows上下文中）在项目或解决方案的根目录（根据您的喜好）通过npm所需的模块进行安装，在我的例子中，我想安装三个和三个/类型。您可以按照三个文档页面中的说明进行操作。 注意：即使他们说不再需要这些类型，我也必须安装它们。
4. 通过 npm 安装

   webpack

   ，在项目根目录创建一个

   webpack.config.js

   ，这会将所有 js（来自构建的打字稿代码）捆绑到一个 main.bundle.js 文件中，您应该将其包含在 index.html 中。通常，为了让 webpack 知道要包含哪些文件，您需要一个 index.ts，在其中为要包含的每个文件编写：

   import \'myTsClass.ts\'

   。注意：要使 webpack 工作，您需要通过 cmd->npx 手动运行它，当您在您最喜欢的 IDE 上工作时，它会自动工作，您可以在 cmd 中运行：

   npx webpack --watch

   。

这几乎是所有的路要走，或者至少对我来说是这样。

剧透：也许有更好的方法，也许没有必要将它们全部捆绑在一个文件中。每一步都花了我好几个小时。我必须进行大量调查，因为对我来说所有这些都是相当新的，这意味着可能有更好的方法和更聪明的方法来实现这一点，但是当涉及到 typescript、blazor、导入模块和使用时，我没有找到任何关于该主题的信息。他们以一种直接的方式。