typescript - 使用 webpack、threejs 示例和 typescript？

Question

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

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

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

import THREE = require('three');

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

有没有人在这个包中得到了一些东西(比如后处理)来使用 typescript ？

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'
    }
  ]
}

现在，示例模块将在他们期望的时候找到三个全局变量。

然后，为了使导入示例不那么冗长:

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 上找不到示例模块的警告，你可能会发现 this issue在 imports-loader 存储库中有用以供引用。