时间戳

首页 > 解决方案 > Console error after successfully compiling TS files to JS and bundling with webpack

node.js - Console error after successfully compiling TS files to JS and bundling with webpack

问题描述

I'm trying to use three.js with type definitions from NPM (@types/three) so that I can write some 3D stuff with intellisense. I have one Typescript file like this:

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();

Now that's basically same as the example here (https://www.npmjs.com/package/three) except in TS instead of JS.

In addition here's my 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"
}

Here's my tsconfig.json

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

So the problem is that when I first run npm run compilets it compiles all my ts files to js files (I didn't install Typescript globally and that's why I have to refer tsc like so). Then when I run npm run webpackbuild it runs without any error and bundles all stuff into index.js. Now when I'm trying to run that in browser (I have very simple HTML page that just calls index.js) I get the following error:

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

Am I using types somehow wrong there or what might be the issue? Any help is appreciated and I can provide more info if needed.

标签： node.jstypescriptwebpackthree.jstypescript-typings

解决方案

好吧，我发现答案非常简单，但很难捕捉/注意到。只是我的 three.js 库与类型版本不匹配。我将 three.js 降级到 0.93，现在它可以工作了。现在@types/three 是 0.93，所以我想我必须使用那个版本，直到它们被更新。

推荐阅读