Estoy haciendo un proyecto mecanografiado para el código javascript del lado del cliente.
Antes de usar TypeScript, importé un módulo como este (es Vanilla js en es6)
import * as THREE from 'https://threejs.org/build/three.module.js';
pero con mecanografiado, instalé el módulo con npm install
y luego lo importé así
import * as THREE from 'three';
El problema es que cuando ejecuto el código js compilado, aparece este error js del navegador:
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
desde import * as THREE from 'three';
ahora está en los archivos js compilados.
¿Cómo puedo arreglar esto?
Gracias
tsconfig.json
{ "compilerOptions": { "outDir": "dist/", "rootDir": "./src", "sourceMap": false, "noImplicitAny": true, "moduleResolution": "Node", "resolveJsonModule": true, "module": "ESNext", "target": "ESNext", "lib": [ "ESNext", "DOM" ], "allowJs": false, "alwaysStrict": true, "typeRoots": [ "node_modules/@types" ] }, "include": [ "src/", "src/**/*.json" ], "exclude": [ ] }
Esto supone que está utilizando TypeScript para compilar módulos ES aislados destinados para su uso en el navegador, cargados en etiquetas HTML como
<script type="module" src="myCompiledModule.js">
. Según los detalles de su pregunta, parece que este es el caso.
Aunque no es del todo sencillo, es relativamente simple lograr esto:
Para satisfacer al compilador, asegúrese de haber instalado typescript
y @types/three
:
npm install typescript @types/three
Luego, agregue esta asignación de ruta a su ./tsconfig.json
:
{ ... "compilerOptions": { "baseUrl": ".", "paths": { "https://threejs.org/build/three.module.js": ["node_modules/@types/three"] }, ... }, ... }
Aquí está la configuración completa que estoy usando para probar esto:
{ "compilerOptions": { "baseUrl": ".", "paths": { "https://threejs.org/build/three.module.js": ["node_modules/@types/three"] }, "esModuleInterop": true, "exactOptionalPropertyTypes": true, "isolatedModules": true, "lib": [ "esnext", "dom", "dom.iterable" ], "module": "esnext", "moduleResolution": "node", "noUncheckedIndexedAccess": true, "outDir": "dist", "strict": true, "target": "esnext", "useUnknownInCatchVariables": true }, "include": [ "./src/**/*" ] }
Ahora, tendrá los tipos correctos para THREE
en los módulos donde se importa usando el especificador "https://threejs.org/build/three.module.js"
. Por ejemplo, cuando THREE.Mesh
, TypeScript IntelliSense me muestra que es este tipo:
class Mesh<TGeometry extends THREE.BufferGeometry = THREE.BufferGeometry, TMaterial extends THREE.Material | THREE.Material[] = THREE.Material | THREE.Material[]>
Aquí está el módulo de ejemplo en mi prueba:
./src/index.ts
:
import * as THREE from 'https://threejs.org/build/three.module.js'; console.log(THREE);
Ahora, cuando compile su proyecto usando tsc
, obtendrá este resultado, que es un módulo ECMAScript válido y usará el módulo "tres" importado desde la URL alojada:
./dist/index.js
:
import * as THREE from 'https://threejs.org/build/three.module.js'; console.log(THREE);
Para usar esto en el lado del cliente, se necesitaría un paquete.
Sugiero webpack o snowpack. Snowpack es nuevo y tiene muchas características geniales.
Los paquetes instalados con NPM generalmente se encuentran en la carpeta node_modules
. Esto significa que puede acceder a la biblioteca a través de su ruta relativa:
import * as THREE from './node_modules/tree/build/three.module.js';