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

Question

我在使用threejs的例子(比如EffectComposer或Detector)来处理webpack和typescript时遇到了很多麻烦.

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

随着three从NPM安装我可以这样做

import THREE = require('three');

哪个工作正常,但没有任何上述的好东西.在npm上有一些其他的三个包捆绑插件,但我认为它们不适用于typescript(因为require('three-js')(['EffectComposer'])被打字稿编译器拒绝了).

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

Answer 1

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

根据丹的回答:

$ 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';

导入模块的副作用.

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加载器而不是将它们嵌入到require中.当我有一个例子时,我会更新这个答案.