Búsqueda de sitios web

Cómo convertir la sintaxis de importación de módulos npm de TypeScript a la sintaxis de importación de módulos ECMA2015

Estoy tratando de usar una biblioteca de terceros en un proyecto de Typescript (específicamente, three). Como prueba de concepto, estoy intentando resolver todo mi código cliente como módulos (sin transpilar a ES5 ni hacer un bundling).

mi proyecto está configurado así:

cgi/app.js (compiled typescript file)
node_modules/@types
node_modules/three/build/three.module.js
src/app.ts
index.html
tsconfig.json
package.json

Y en mi index.html

<head>
    <script type="module" src="node_modules/three/build/three.module.js"></script>
    <script type="module" src="cgi/app.js"></script>
</head>

Estoy intentando que TypeScript resuelva el archivo three.module.js mientras también utiliza las declaraciones de tipo de @types/three. Normalmente, importarías la biblioteca con: import { Scene } from 'three', lo que me da soporte de tipos, pero el módulo compilado no tiene la sintaxis ES6 adecuada. Necesita ser import { Scene } from './path/to/three.js'.

Desafortunadamente, TypeScript aún no admite hacer esto automáticamente. En su lugar, puedo importar directamente el módulo ES6 (sin usar @types), pero entonces pierdo el soporte de tipos.

Después de la compilación de TypeScript, ¿es posible convertir la resolución de módulos de la sintaxis de Node a la sintaxis de ES6? (por ejemplo, import { Scene } from 'three' se convierte en import { Scene } from './three.js'?

Específicamente, ¿es posible aprovechar Rollup para lograr esto?

Respuesta #1

Esto se puede hacer usando el valor de configuración paths de Rollup.

Por ejemplo, en mi archivo app.ts tengo una importación estándar al estilo npm:

import { somedependency } from my-dependency (donde my-dependency es un módulo de Node, como three.)

En el archivo rollup.config, necesitas indicarle a Rollup la ruta a este archivo:

output: { ... },
plugins: [ ... ]
paths: {'my-dependency': './your/web/path/to/the/dependency.js'}

Tu paquete compilado ahora tendrá una buena importación a ese código que puede ser entendida por el navegador.

Artículos relacionados