typescript 使用 webpack、threejs 示例和打字稿？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35968047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using webpack, threejs examples, and typescript?
提问by Ryan N
I'm having a lot of trouble getting stuff in threejs's examples (like EffectComposer or Detector) to work with webpack and typescript.
我在获取 Threejs 示例（如 EffectComposer 或 Detector）中的内容以使用 webpack 和 typescript 时遇到了很多麻烦。
First off the relevant *.d.tsfiles 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/).
首先，相关*.d.ts文件都存在并通过tsd. 我的问题是让 webpack 实际上包含默认 Threejs 构建之外的文件（即examples/js/.
With threeinstalled from npm I can do something like
随着three从NPM安装我可以这样做
import THREE = require('three');
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.
哪个工作正常，但缺少上述任何好处。npm 上还有一些其他 Threejs 包捆绑了插件，但我认为它们不适用于打字稿（因为require('three-js')(['EffectComposer'])被打字稿编译器拒绝。
Has anyone gotten something in this package (like postprocessing) to work with typescript?
有没有人在这个包中得到一些东西（比如后处理）来处理打字稿？
采纳答案by Dan Weaver
Here's what worked for me.
这对我有用。
$ npm install --save-dev exports-loader imports-loader
Then, to use something from three/examples/js, I do this:
然后，要使用来自 的东西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 ...
I think the right thing to do is use the importsand exportsloaders by configrather than embedding them in the require. I'll update this answer when I have an example.
我认为正确的做法是通过配置使用imports和exports加载器，而不是将它们嵌入到 require 中。当我有一个例子时，我会更新这个答案。
回答by Chris Williamson
I managed to find a pretty clean way to set this up in webpack.config.js.
我设法找到了一种非常干净的方法来在webpack.config.js.
As per Dan's answer:
根据丹的回答：
$ npm install --save-dev imports-loader
$ npm install --save-dev imports-loader
It turns out we don't actually need exports-loader, since the three.js examples add their constructors to the THREEobject.
事实证明我们实际上并不需要exports-loader，因为三个.js 示例将它们的构造函数添加到THREE对象中。
Then, in webpack.config.js, we can add a rule to add var THREE = require('three');to an imported module if the module's path resolves to anything containing three/examples/js:
然后，在 中webpack.config.js，var THREE = require('three');如果模块的路径解析为包含three/examples/js以下内容的任何内容，我们可以添加规则以添加到导入的模块中：
module: {
rules: [
...
{
test: /three\/examples\/js/,
use: 'imports-loader?THREE=three'
}
]
}
Now the example modules will find the THREE global when they expect it.
现在示例模块将在他们期望的时候找到三个全局变量。
Then, to make importing examples a little less verbose:
然后，为了使导入示例不那么冗长：
resolve: {
alias: {
'three-examples': path.join(__dirname, './node_modules/three/examples/js')
},
...
},
This assumes that webpack.config.jsis in the same directory as node_modules, adjust accordingly.
这假设与webpack.config.js位于同一目录中node_modules，请相应调整。
Now, we can use the example files like so:
现在，我们可以像这样使用示例文件：
import * as THREE from 'three';
import 'three-examples/controls/OrbitControls';
to import the module for its side-effects.
导入模块的副作用。
If you're using this with Typescript and/or Babel and are getting warnings about the example module not being found on THREE, you may find this issueon the imports-loaderrepository useful to reference.
如果您将它与 Typescript 和/或 Babel 一起使用，并且收到有关在 上找不到示例模块的警告THREE，您可能会发现存储库中的此问题对imports-loader参考很有用。
回答by Jokester
I was able to bundle OrbitControls with (webpack v2 + ts-loader) and no other loaders.
我能够将 OrbitControls 与 (webpack v2 + ts-loader) 捆绑在一起，而没有其他加载器。
package.json:
包.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:
入口点.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
NOTE: webpack may warn like "export 'OrbitControls' (imported as 'THREE') was not found in 'three', because OrbitControls.jsis not a proper JS module. I suppose we can just ignore this warning.
注意：webpack 可能会发出类似警告"export 'OrbitControls' (imported as 'THREE') was not found in 'three'，因为OrbitControls.js它不是一个合适的 JS 模块。我想我们可以忽略这个警告。
回答by blacknugget
I will try to answer just the part of your question regarding TypeScript and ThreeJS integration within your IDE.
我将尝试仅回答您关于 IDE 中的 TypeScript 和 ThreeJS 集成的部分问题。
As you've seen, most of the components are hosted on the DefinitelyTyped archives. I do recommend stop using tsdand migrate to typing.
正如您所见，大多数组件都托管在绝对类型档案中。我建议停止使用tsd并迁移到typing.
A basic typings.jsonthat typingwill consume is listed below. It gets the latest main ThreeJS and the effect composer library to be recognized by TypeScript. Note the commit hashtags will change as the .tsdevolves.
下面列出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"
}
}
Attached is a snapshot of an IDE recognizing the public methods of the EffectsComposer. You may want to also experiment with different module loader capabilities of TypeScript.
附件是识别 EffectsComposer 公共方法的 IDE 快照。您可能还想尝试使用 TypeScript 的不同模块加载器功能。
