使用 webpack、threejs 示例和打字稿? [英] Using webpack, threejs examples, and typescript?

问题描述

我在获取 Threejs 示例(如 EffectComposer 或 Detector)中的内容以使用 webpack 和 typescript 时遇到了很多麻烦.

I'm having a lot of trouble getting stuff in threejs's examples (like EffectComposer or Detector) to work with webpack and typescript.

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

First off the relevant *.d.ts files are all present and installed via tsd. My problem is getting webpack to actually include files outside of the default threejs build (namely things in examples/js/).

通过从 npm 安装 three 我可以做类似的事情

With three installed from npm I can do something like

import THREE = require('three');

工作正常，但缺少上述任何优点.npm 上还有一些其他 Threejs 包捆绑插件，但我认为它们不适用于打字稿(因为 require('three-js')(['Ef​​fectComposer']) 被拒绝打字稿编译器.

Which works fine but lacks any of the aforementioned goodies. There are a few other threejs packages on npm that bundle plugins but I don't think they work with typescript (since require('three-js')(['EffectComposer']) is rejected by the typescript compiler.

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

Has anyone gotten something in this package (like postprocessing) to work with typescript?

推荐答案

这对我有用.

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

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

Then, to use something from three/examples/js, I do this:

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 中.当我有一个例子时，我会更新这个答案.

I think the right thing to do is use the imports and exports loaders by config rather than embedding them in the require. I'll update this answer when I have an example.

这篇关于使用 webpack、threejs 示例和打字稿?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！