如何在打字稿项目中的客户端包含模块？

Question

我正在为客户端javascript代码制作一个typescript项目。

在我使用打字稿之前，我导入了一个这样的模块（这是 es6 中的香草 js）

< code > import * as THREE from ' https://THREE js . org/build/THREE . module . js '；

但是使用打字稿，我用 npm install 安装了模块，然后像这样导入它

< code > import * as THREE from ' THREE '；

问题是，当我运行编译的 js 代码时，我收到此浏览器 js 错误：

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

因为从“三”导入*为THREE；现在在编译后的js文件中。

我该如何解决这个问题？

谢谢

tsconfig.json

{
    "compilerOptions": {
        "outDir": "dist/",
        "rootDir": "./src",
        "sourceMap": false,
        "noImplicitAny": true,
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "module": "ESNext",
        "target": "ESNext",
        "lib": [
            "ESNext", "DOM"
        ],
        "allowJs": false,
        "alwaysStrict": true,
        "typeRoots": [
            "node_modules/@types"
        ]
    },
    "include": [
        "src/",
        "src/**/*.json"
    ],
    "exclude": [

    ]
}

Answer 1

与NPM一起安装的包通常位于node_modules文件夹中。这意味着您可以通过其相对路径访问库：

import * as THREE from './node_modules/tree/build/three.module.js';

Answer 2

为了在客户端使用它，需要一个捆绑器。

我建议使用网络包或雪包。雪包是新的，有很多非常酷的功能。

Answer 3

这里假设您正在使用TypeScript来编译要在浏览器中使用的独立es模块，这些模块加载在HTML标记中，如< code >

虽然不完全简单，但实现这一点相对简单：

为了满足编译器，请确保您已经安装了类型化脚本和@类型/三：

npm install typescript @types/three

然后，将此路径映射添加到您的./tsconfig.json：

{
  ...
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "https://threejs.org/build/three.module.js": ["node_modules/@types/three"]
    },
    ...
  },
  ...
}

这是我用来测试的完整配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "https://threejs.org/build/three.module.js": ["node_modules/@types/three"]
    },
    "esModuleInterop": true,
    "exactOptionalPropertyTypes": true,
    "isolatedModules": true,
    "lib": [
      "esnext",
      "dom",
      "dom.iterable"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noUncheckedIndexedAccess": true,
    "outDir": "dist",
    "strict": true,
    "target": "esnext",
    "useUnknownInCatchVariables": true
  },
  "include": [
    "./src/**/*"
  ]
}

现在，您将在使用说明符导入的模块中为THREE找到正确的类型。“https://threejs.org/build/three.module.js“。例如，当我键入THREE.Mesh时，TypeScript IntelliSense向我显示它是这样的类型：

class Mesh<TGeometry extends THREE.BufferGeometry = THREE.BufferGeometry, TMaterial extends THREE.Material | THREE.Material[] = THREE.Material | THREE.Material[]>

下面是我的测试中的示例模块:

./src/index.ts：

import * as THREE from 'https://threejs.org/build/three.module.js';
console.log(THREE);

现在，当您使用tsc编译项目时，您将得到这个输出，它是一个有效的ECMAScript模块，并将使用从托管URL导入的“three”模块：

./dist/index.js：

import * as THREE from 'https://threejs.org/build/three.module.js';
console.log(THREE);