0
325
Views¿Cómo incluir módulos en el lado del cliente en proyectos mecanografiados?
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": [ ] }3 answers
Answer question0
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);0
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.
0
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';