Estoy creando un juego de PixiJS con módulos ES nativos, sin usar un paquete como Parcel o Rollup.
También estoy cargando PixiJS como un módulo nativo, encontré el módulo en node_modules/pixi.js/dist/esm/pixi.js . Ahora puedo usar:
import { Sprite } from './pixi.mjs' El único problema es que VS Code no reconoce el archivo index.d.ts que lo acompaña (encontré este archivo en node_modules/pixi.js/index.d.ts ), por lo que la verificación de tipos para PixiJS no funciona correctamente, incluso ¡aunque el código SÍ se ejecuta!
Mi estructura de carpetas es súper simple. Ni siquiera hay un package.json .
index.html js/app.js js/pixi.mjs js/pixi.mjs.map js/index.d.ts ¿Cómo puedo obligar a VS Code a leer el archivo index.d.ts ?
Hay un par de problemas con este enfoque.
En primer lugar, si observa los tipos instalados por pixi.js en node_modules/pixi.js/index.d.ts , encontrará que está casi vacío y hace referencia a paquetes externos que comienzan con @pixi . Esto se debe al enfoque mono-repo en el proyecto pixi .
Solo cumplirá con esas referencias si estos paquetes se instalan como módulos npm (lo que sucede automáticamente después de instalar pixi.js) y para los cuales necesita un package.json para que TypeScript los encuentre por su nombre de paquete.
En segundo lugar, VS Code (o mejor dicho, el motor TypeScript) no es capaz de relacionar los archivos pixi.mjs e index.d.ts una vez que se sacan de la carpeta node_modules . Aunque las clases tienen el mismo nombre (Sprite, Container, etc.), TypeScript no puede concluir con seguridad que se refieren a lo mismo.
Este flujo de trabajo es automático cuando se usa npm gracias a la propiedad de types en node_modules/pixi.js/package.json . Como alternativa, puede cambiar el nombre del archivo index.d.ts a pixi.mjs.d.ts y TypeScript los relacionará por nombre de archivo.
Esta es la estructura de carpetas que TypeScript puede entender:
index.html js/app.js js/pixi.mjs js/pixi.mjs.d.ts js/pixi.mjs.map Finalmente, las correcciones anteriores solo proporcionarán inferencia de tipos, pero no detección de errores en los archivos js. Si desea que VS Code informe errores, debe crear un archivo tsconfig.json con la siguiente configuración:
{ "compilerOptions": { "noEmit": true, "checkJs": true, }, "include": ["js/*.js"], }