Ошибка консоли после успешной компиляции файлов TS в JS и связывания с веб-пакетом - PullRequest
Новая
       9

Ошибка консоли после успешной компиляции файлов TS в JS и связывания с веб-пакетом

0 голосов
/ 28 ноября 2018

Я пытаюсь использовать three.js с определениями типов из NPM (@ types / three), чтобы я мог написать некоторые 3D-вещи с помощью intellisense.У меня есть один файл 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();

Теперь это в основном то же самое, что и пример здесь (https://www.npmjs.com/package/three) за исключением TS вместо JS.

Кроме того, вот мой пакет.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

Я использую типы как-то не так или в чем проблема? Любая помощь приветствуется, и я могу предоставить большеинформация при необходимости.

1 Ответ

0 голосов
/ 03 декабря 2018

Ладно, я нашел ответ, который оказался очень простым, но очень трудно уловить / заметить.Просто моя библиотека three.js не соответствовала версиям набора текста.Я понизил Three.js до 0,93, и теперь это работает.Прямо сейчас @ types / three находится на 0,93, поэтому я думаю, что мне придется использовать эту версию, пока они не будут обновлены.

...