1
votes

Comment déclarer une référence à un espace de noms existant qui est disponible à partir du bundle JavaScript au moment de l'exécution

J'écris un plugin pour l'application JavaScript existante - Forge Autodesk .Affichage

Après la version 6, ils ont inclus THREE.js dans leur ensemble d'applications.

Pour le moment, je peux l'utiliser avec mon plugin comme ceci:

import * as THREE from 'three'; 

mais je perds tous les types, donc j'installe three.js par:

        const planes:THREE.Plane[] = []; //this line is okey

        planes.push(new THREE.Plane()); //but this says
        
        //'THREE' refers to a UMD global, 
        // but the current file is a module. 
        // Consider adding an import instead.

Je peux utiliser THREE et importer il, mais je n'ai pas besoin de l'importer car je l'ai déjà dans mon application principale. Ce que je dois faire est de référencer des types, j'ai donc essayé de faire quelque chose comme ceci:

    declare var THREE:THREE;
//Cannot use namespace 'THREE' as a type.

Ensuite, j'ai essayé de:

/ // qui fonctionne bien, mais:

npm install --save three

Tsc insiste sur le fait que nous devrions l'importer:

declare var THREE:any; 

Il se compile sans aucun problème, mais lorsque je lance l'application, il plante, car il essaie d'obtenir une autre instance de THREE.js, que je ne fournis pas car je l'ai dans l'application principale.

Comment déclarer la référence correcte et conserver les types dans un espace de noms disponible dans l'application JavaScript principale?


0 commentaires

3 Réponses :


0
votes

Ypu doit importer TROIS modules: Comme ceci:

/// <reference path="..\..\node_modules\@types\three\index.d.ts" />

ou

var THREE = require('Three').

et utilisez webpack ou un autre chargeur de module (!)

Si vous le souhaitez pour inclure manuellement le fichier de distribution THREEJS et utiliser les liaisons TS (définitions de type) sans modules (non recommandé) - vous pouvez inclure Three.d.ts dans votre projet (avec d'autres fichiers THREEJS d.ts) et utilisez-le avec trois barres obliques réf. Par exemple:

import * as THREE from 'three'; // or import THREE from 'three';

Remarque: n'importez pas THREE namespace avec "import" ou "require" dans ce cas.


1 commentaires

Comme je l'ai dit - ce n'est pas valide. J'en ai déjà TROIS dans l'application principale. Je n'ai pas besoin de l'inclure dans mon extension. Seuls les types requis.



0
votes

Il existe un fichier de définition TypeScript (.d.ts) pour Forge Viewer que vous devriez pouvoir utiliser avec un fichier de définition THREE.js: https://forge.autodesk.com/blog/typescript-definitions-forge-viewer-and-nodejs -client-sdk-now-available .


2 commentaires

Si vous lisez l'article auquel vous faites référence, vous remarquerez peut-être qu'il est nécessaire d'installer @ types / three. Mais ce type est obsolète et inclus dans «trois» à partir de ce juin. Et au moment où j'écris, j'ai ces types. Ce dont j'ai besoin est de référencer TROIS espaces de noms.


Je suis au courant de ça. Cependant, Forge Viewer est basé sur une ancienne version de three.js (je crois que c'est R71) qui n'inclut pas encore les définitions TypeScript. C'est pourquoi vous devez importer les types séparément en utilisant quelque chose comme @ types / three .



0
votes

Si vous rencontrez un problème tel que:

npm install typescript

(à propos de UMD)

Vous pouvez essayer d'utiliser l'option dans tsconfig.json

"compilerOptions": {
    "allowUmdGlobalAccess": true,

(à propos des options de configuration)

Cela donnera au compilateur un accès à UMD global, vous n'avez donc pas besoin d'importer ou de référencer de tels modules dans ce cas.

Et c'est exactement le cas avec three.js Ils ajoutent déjà TROIS espaces de noms comme module à la portée globale UMD. Donc, si vous devez inclure ce module, vous devez importer. Si vous voulez uniquement des références, vous pouvez utiliser cette option. Si dactylographié ne reconnaît pas cette option dans la configuration, mettez simplement à jour votre dactylographie.

'THREE' refers to a UMD global, but the current file is a module. Consider adding an import instead.

Merci cher SalientBrain et cher Petr Broz pour votre attention et votre aide.


0 commentaires