Используя веб-пакет, три примера и typescript?

У меня много проблем с получением материалов в трех примерах (например, EffectComposer или Detector) для работы с webpack и typescript.

Сначала все соответствующие файлы *.d.ts присутствуют и устанавливаются через tsd. Моя проблема заключается в том, что webpack фактически включает файлы, не связанные со сборкой по умолчанию 3Js (а именно вещи в examples/js/).

С three, установленным с npm, я могу сделать что-то вроде

import THREE = require('three');

Что работает отлично, но не имеет ни одного из вышеупомянутых положительных героев. Есть еще несколько пакетов из трех пакетов на npm, которые связывают плагины, но я не думаю, что они работают с typescript (поскольку require('three-js')(['EffectComposer']) отклоняется компилятором typescript.

Кто-нибудь получил что-то в этом пакете (например, постобработку) для работы с typescript?

Ответы

Ответ 1

Вот что сработало для меня.

$ 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 загрузчики по конфигурации, а не встраивать их в запрос. Я буду обновлять этот ответ, когда у меня есть пример.

Ответ 2

Мне удалось найти довольно чистый способ настроить это в webpack.config.js.

Согласно ответу Дэна:

$ npm install --save-dev imports-loader

Оказывается, нам на самом деле не нужен export 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, вы можете найти эту проблему в репозитории imports-loader полезной для справки.

Ответ 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-модулем. Полагаю, мы можем просто игнорировать это предупреждение.

Ответ 4

Я попытаюсь ответить только на часть вашего вопроса относительно интеграции TypeScript и трехJS в вашей среде IDE.

Как вы видели, большинство компонентов размещены в архивах DefinitelyTyped. Я рекомендую прекратить использование tsd и перейти на typing.

Ниже приведена базовая typings.json, которую будет потреблять typing. Он получает последнюю основную тройку и библиотеку композитора эффектов, которая распознается TypeScript. Обратите внимание, что hashtags commit будет меняться по мере развития .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"
  }
}

Прикрепленный является снимком среды IDE, распознающей общедоступные методы EffectsComposer. Вы можете также поэкспериментировать с различными возможностями загрузчика модуля TypeScript.