使用webpack，threejs示例和打字稿？

Question

我在使用threejs的示例（如EffectComposer或Detector）中处理webpack和打字稿时遇到了很多麻烦。

首先，所有相关的*.d.ts文件都存在并通过tsd安装。我的问题是让webpack实际包含默认的threejs构建之外的文件（即examples/js/中的内容）。

从npm安装three后，我可以执行类似

的操作

import THREE = require('three');

哪种方法可以正常使用，但缺少上述任何一种好东西。在npm上有一些其他的三个包捆绑插件，但我不认为它们使用的是打字稿（因为require('three-js')(['EffectComposer'])被打字稿编译器拒绝了。

有没有人在这个包中得到一些东西（比如后期处理）来处理打字稿？

Answer 1

我设法找到一种非常干净的方法来在webpack.config.js中设置它。

根据Dan的回答：

$ npm install --save-dev imports-loader

事实证明我们实际上并不需要exports-loader，因为three.js示例将它们的构造函数添加到THREE对象。

然后，在webpack.config.js中，如果模块的路径解析为包含var THREE = require('three');的任何内容，我们可以添加规则以将three/examples/js添加到导入的模块中：

module: {
  rules: [
    ...
    {
      test: /three\/examples\/js/,
      use: 'imports-loader?THREE=three'
    }
  ]
}

现在示例模块将在他们期望的时候找到THREE全局。

然后，为了使导入示例更简洁：

resolve: {
  alias: {
    'three-examples': path.join(__dirname, './node_modules/three/examples/js')
  },
  ...
},

这假定webpack.config.js与node_modules位于同一目录中，并进行相应调整。

现在，我们可以像这样使用示例文件：

import * as THREE from 'three';
import 'three-examples/controls/OrbitControls';

导入模块的副作用。

如果您在使用Typescript和/或Babel时遇到此问题并且在THREE上找不到示例模块的警告，您可能会在imports-loader存储库中找到this issue参考。

Answer 2

这对我有用。

$ npm install --save-dev exports-loader imports-loader

然后，要使用three/examples/js中的内容，我会这样做：

const THREE = require('three');
// imports provides THREE to the OrbitControls example
// exports gets THREE.OrbitControls
THREE.OrbitControls = require('imports?THREE=three!exports?THREE.OrbitControls!../../node_modules\/three\/examples\/js\/controls\/OrbitControls');

// use THREE.OrbitControls ...

我认为正确的做法是使用imports和exports加载器by config，而不是将它们嵌入到require中。当我有一个例子时，我会更新这个答案。

Answer 3

我能够将OrbitControls与（webpack v2 + ts-loader）捆绑在一起，而不是其他装载程序。

的package.json：

"dependencies": {
    "three": "^0.85.2",
    "@types/three": "^0.84.12",
    "ts-loader": "^2.1.0",
    "typescript": "^2.3.4",
    "webpack": "^2.6.1"
},

entrypoint.ts：

import * as THREE from "three";

// OrbitControls.js expects a global THREE object
(window as any).THREE = THREE;

// NOTE: OrbitControls must be included with require:
// using "import" cause it to be executed before global THREE becomes available
require("three/examples/js/controls/OrbitControls");

// ... code that uses THREE and THREE.OrbitControls

注意：webpack可能会像"export 'OrbitControls' (imported as 'THREE') was not found in 'three'一样发出警告，因为OrbitControls.js不是正确的JS模块。我想我们可以忽略这个警告。

Answer 4

我将尝试回答有关您IDE中TypeScript和ThreeJS集成问题的部分内容。

如您所见，大多数组件都托管在DefinitelyTyped存档上。我建议您停止使用tsd并迁移到typing。

typings.json将使用的基本typing如下所示。它获得了最新的主要ThreeJS和效果作曲家库，可以被TypeScript识别。请注意，提交主题标签将随着.tsd的发展而变化。

{
  "ambientDependencies": {
    "three": "github:DefinitelyTyped/DefinitelyTyped/threejs/three.d.ts#c6c3d3e65dd2d7035428f9c7b371ec911ff28542",
    "three-projector": "github:DefinitelyTyped/DefinitelyTyped/threejs/three-projector.d.ts#48f20e97bfaf70fc1a9537b38aed98e9749be0ae",
    "three-detector": "github:DefinitelyTyped/DefinitelyTyped/threejs/three-effectcomposer.d.ts#48f20e97bfaf70fc1a9537b38aed98e9749be0ae",
    "three-effectscomposer": "github:DefinitelyTyped/DefinitelyTyped/threejs/detector.d.ts#48f20e97bfaf70fc1a9537b38aed98e9749be0ae",
    "three-shaderpass": "github:DefinitelyTyped/DefinitelyTyped/threejs/three-shaderpass.d.ts#ee05b1163d8da7f16719f08d52f70ab524f1003a"
  }
}

附件是识别EffectsComposer的公共方法的IDE的快照。您可能还想尝试使用TypeScript的不同模块加载器功能。