Question

我正在尝试使用带有NPM（@ types / three）类型定义的three.js，以便我可以用intellisense编写一些3D内容。我有一个这样的Typescript文件：

import * as THREE from "three";

let camera: THREE.PerspectiveCamera;
let scene: THREE.Scene;
let mesh: THREE.Mesh;
let renderer: THREE.WebGLRenderer;

function init() {
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / 
    window.innerHeight, 0.01, 10);
    camera.position.z = 1;

    scene = new THREE.Scene();

    let geometry: THREE.BoxGeometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
    let material: THREE.MeshNormalMaterial = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
}

function animate() {
    requestAnimationFrame(animate);

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, camera);
}

init();
animate();

现在，除了TS而不是JS，基本上与此处的示例（https://www.npmjs.com/package/three）相同。

此外，这是我的package.json

{
  "name": "orbital",
  "version": "0.0.1",
  "description": "ThreeJs software to simulate orbitals.",
  "main": "index.js",
  "scripts": {
    "compilets": "node node_modules\\typescript\\lib\\tsc",
    "webpackbuild": "webpack --mode development --entry ./main.js --output ./index.js"
  },
  "dependencies": {
    "three": "^0.98.0"    
  },
  "devDependencies": {
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2",
    "typescript": "^3.1.6",
    "@types/node": "^10.12.10",
    "@types/three": "^0.93.10"
  },
  "author": "My name",
  "license": "ISC"
}

这是我的tsconfig.json

{
  "compilerOptions": {    
    "target": "es5",                          
    "module": "es2015",                     
    "strict": true,                         
    "esModuleInterop": true                 
  },
  "files": [
    "main.ts"
  ],
  "include": [
    "models"
  ],
  "exclude": [
    "node_modules"
  ]
}

所以问题在于，当我第一次运行npm run compilets时，它将所有ts文件编译为js文件（我没有全局安装Typescript，这就是为什么我必须像这样引用tsc的原因）。然后，当我运行npm run webpackbuild时，它将运行而没有任何错误，并将所有内容捆绑到index.js中。现在，当我尝试在浏览器中运行它时（我有一个非常简单的HTML页面，仅调用index.js），我得到以下错误：

Uncaught SyntaxError: Unexpected identifier
    at Object../node_modules/three/build/three.module.js (index.js:109)
    at __webpack_require__ (index.js:20)
    at eval (main.js:2)
    at Module../main.js (index.js:97)
    at __webpack_require__ (index.js:20)
    at index.js:84
    at index.js:87
./node_modules/three/build/three.module.js @ index.js:109
__webpack_require__ @ index.js:20
(anonymous) @ main.js:2
./main.js @ index.js:97
__webpack_require__ @ index.js:20
(anonymous) @ index.js:84
(anonymous) @ index.js:87

我在某种程度上使用类型错误吗？或者可能是问题所在？感谢您的帮助，如有需要，我可以提供更多信息。

Answer 1

Okey，我发现答案很简单，尽管很难抓住/注意到。只是我的three.js库与打字版本不匹配。我将three.js降级为0.93，现在它可以工作了。现在，@ types / three的值为0.93，所以我猜我必须使用该版本，直到它们被更新。

成功将TS文件编译为JS并与Webpack捆绑在一起后出现控制台错误

1 个答案: