如何在webpack中使用@types/three ?

Question

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

我已经安装了webpack和ts-loader。我能够编译我的项目，但我在我的ts文件中得到错误，即无法识别THREEjs的类类型。我已经安装了@types/three包，但我不知道如何让ts-loader使用它。 以下是我的配置文件:package.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:NodeJsProjectnode_modulesthreebuildthree"'没有导出成员'DataTexture'.

Answer 1

好的，我做的是:NPM卸载"@types/three"然后:NPM install '@types/three'

基本上卸载了这些类型，然后重新安装它们就成功了。现在我不关心THREE.js类型相关的错误。