成功将 TS 文件编译为 JS 并与 webpack 捆绑后的控制台错误答案

【问题标题】：Console error after successfully compiling TS files to JS and bundling with webpack成功将 TS 文件编译为 JS 并与 webpack 捆绑后的控制台错误
【发布时间】：2019-04-29 16:55:57
【问题描述】：

我正在尝试将 three.js 与来自 NPM (@types/three) 的类型定义一起使用，以便我可以使用智能感知编写一些 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();

现在这与此处的示例 (https://www.npmjs.com/package/three) 基本相同，但在 TS 而不是 JS 中。

另外这里是我的 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

我在那里使用的类型是否有问题或者可能是什么问题？感谢您提供任何帮助，如果需要，我可以提供更多信息。

【问题讨论】：

附带说明：将 typescript 和这两种类型移动到您的 devDependencies。因为它们不需要编译。
@Silvermind 感谢您的提示。我进行了更改并更新了我的原始帖子以匹配当前状态。并不是说它有任何影响，但仍然:)
这没有任何区别。当您不开发要在 npm 上发布的库时，devDeps 和 deps 不会产生影响
和 @types 无论如何都被 ts 省略了
您能否浏览编译后的index.js 文件，让我们知道第 109 行发生了什么？

标签： node.js typescript webpack three.js typescript-typings

【解决方案1】：

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

【讨论】：