Mit Webpack, drei Beispielen und Typoskript?
Ich habe viel Mühe, Sachen in dreijs Beispielen (wie EffectComposer oder Detector) zu bekommen, um mit Webpack und Typoskript zu arbeiten.
Zunächst sind die relevanten *.d.ts -Dateien alle vorhanden und werden über tsd installiert. Mein Problem ist es, dass webpack Dateien außerhalb des Standard Builds von threejs enthält (nämlich Dinge in examples/js/ ).
Wenn three von npm installiert ist, kann ich etwas wie
Was gut funktioniert, aber keine der oben genannten Leckereien hat. Es gibt ein paar andere Threejs-Pakete auf npm, die Plugins bündeln, aber ich denke nicht, dass sie mit Typescript arbeiten (da require('three-js')(['EffectComposer']) vom Typescript-Compiler abgelehnt wird.
Hat jemand etwas in diesem Paket (wie Postprocessing) bekommen, um mit Typoskript zu arbeiten?
4 Antworten
Hier ist, was für mich funktioniert hat.
%Vor% Um etwas aus three/examples/js zu verwenden, mache ich folgendes:
Ich denke, es ist richtig, die imports und exports loaders zu verwenden config statt sie in das require einzubetten. Ich werde diese Antwort aktualisieren, wenn ich ein Beispiel habe.
Ich habe es geschafft, einen ziemlich sauberen Weg zu finden, dies in webpack.config.js einzurichten.
Laut Dans Antwort:
$ npm install --save-dev imports-loader
Es stellt sich heraus, dass wir exports-loader nicht wirklich benötigen, da die Beispiele von three.js ihre Konstruktoren dem Objekt THREE hinzufügen.
Dann können wir in webpack.config.js eine Regel hinzufügen, die var THREE = require('three'); zu einem importierten Modul hinzufügt, wenn der Pfad des Moduls in eine Datei aufgelöst wird, die three/examples/js enthält:
Nun werden die Beispielmodule die THREE global finden, wenn sie es erwarten.
Um das Importieren von Beispielen etwas weniger ausführlich zu machen:
%Vor% Dies setzt voraus, dass sich webpack.config.js im selben Verzeichnis wie node_modules befindet, passen Sie entsprechend an.
Nun können wir die Beispieldateien wie folgt verwenden:
%Vor%um das Modul für seine Nebenwirkungen zu importieren.
Ich werde versuchen, nur den Teil Ihrer Frage zu beantworten, der die Integration von TypScript und ThreeJS in Ihre IDE betrifft.
Wie Sie gesehen haben, werden die meisten Komponenten in den DefinitelyTyped-Archiven gehostet. Ich empfehle, tsd zu verwenden und zu typing zu migrieren.
Eine grundlegende typings.json , die typing verbrauchen wird, ist unten aufgeführt. Es erhält die neueste Haupt-ThreeJS- und die Effekt-Composer-Bibliothek, die von TypeScript erkannt werden. Beachten Sie, dass sich die Commit-Hashtags mit der Entwicklung von .tsd ändern.
Attached ist eine Momentaufnahme einer IDE, die die öffentlichen Methoden des EffectsComposer erkennt. Vielleicht möchten Sie auch mit verschiedenen Modulladefunktionen von TypeScript experimentieren.
Ich konnte OrbitControls mit (webpack v2 + ts-loader) und keinen anderen Ladeprogrammen kombinieren.
package.json:
%Vor%entrepoint.ts:
%Vor% HINWEIS: webpack kann wie "export 'OrbitControls' (imported as 'THREE') was not found in 'three' warnen, weil OrbitControls.js kein richtiges JS-Modul ist. Ich nehme an, wir können diese Warnung einfach ignorieren.
Tags und Links typescript webpack three.js