如何在 webpack 中使用 @types/three for ts？答案

【问题标题】：How do I use @types/three for ts with webpack?如何在 webpack 中使用 @types/three for ts？
【发布时间】：2021-05-31 00:12:08
【问题描述】：

我有一个 NodeJS 项目，我想使用 webpack 为客户端 Web 应用程序和浏览器编译。

我已经安装了 webpack 和 ts-loader。我能够编译我的项目，但我的 ts 文件中出现错误，即 THREEjs 的类类型无法识别。我已经安装了 @types/three 包，但我不知道如何让 ts-loader 使用它。

这是我的配置文件：包.json

{
    "name": "Lib",
    "version": "1.0.0",
    "description": "",
    "main": "distribute/Lib.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "parcel src/index.html --port 5000"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@types/three": "^0.103.2",
        "browserify": "^17.0.0",
        "javascript-obfuscator": "^2.10.4",
        "parcel": "^2.0.0-nightly.610",
        "parcel-plugin-static-files-copy": "^2.5.1",
        "ts-loader": "^8.0.17",
        "typescript": "^3.9.9",
        "webpack": "^5.24.2",
        "webpack-cli": "^4.5.0"
    },
    "dependencies": {
        "@types/node": "^14.14.31",
        "express": "^4.17.1",
        "node-fetch": "^3.0.0-beta.9",
        "save": "^2.4.0",
        "three": "^0.118.3",
        "three-orbitcontrols": "^2.110.3"
    }
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/Lib.js',
    module: {
        rules: [
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
        },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "types": [
        "three"
        ],
        "allowJs": true
    }
}

这是我得到的 THREE.js 类型错误的示例

TS2694：命名空间 '"I:\NodeJs\Project\node_modules\three\build\three"' 没有导出的成员 'DataTexture'。

【问题讨论】：

标签： node.js typescript webpack three.js

【解决方案1】：

好的，我所做的是： npm 卸载 '@types/three' 然后： npm install '@types/three'

基本上卸载类型然后再次安装它们就可以了。现在我不在乎 THREE.js 类型相关的错误。

【讨论】：