Búsqueda de sitios web

typescript - Cómo hacer que Vite no importe/compile una dependencia externa

Tengo varias bibliotecas que me veo obligado a incluir a través de etiquetas <script>. Sin embargo, aún me gustaría usar las declaraciones de importación equivalentes en mi .ts para esas bibliotecas externas, de modo que obtenga la tipificación adecuada. ¿Cómo le digo a Vite que no agrupe esas importaciones en particular y elimine las declaraciones de importación de ellas?

Respuesta #1

Esto es mucho más difícil de lo que debería ser, pero finalmente encontré una manera de ignorar las bibliotecas incluidas externamente en mi paquete gracias al plugin rollup-plugin-hypothetical y a un fork específico del plugin rollup-plugin-postprocess. Los plugins de Rollup son compatibles con Vite. El plugin hypothetical elimina el código del paquete, y el plugin postprocess permite eliminar las importaciones del paquete mediante expresiones regulares. Ten en cuenta que estoy eliminando todas las importaciones; si solo necesitas eliminar algunas, entonces tu expresión regular de postprocess será diferente.

Instala los plugins con npm:

npm install --save-dev rollup-plugin-hypothetical
npm install --save-dev @stadtlandnetz/rollup-plugin-postprocess

Ejemplo de vite.config.js con los 3 módulos de Node que quería excluir:

// vite.config.js

import hypothetical from 'rollup-plugin-hypothetical';
import postprocess from '@stadtlandnetz/rollup-plugin-postprocess';

export default {
    build: {
        rollupOptions: {
            external: ['masonry-layout', 'typeahead-standalone', 'video.js']
        }
    },
    plugins: [
        hypothetical({
            allowFallthrough: true,
            files: {
                'typeahead-standalone/': ``,
                'masonry-layout/': ``,
                'video.js/': ``
            }
        }),
        postprocess([
            [/import[^;]*/, '']
        ])
    ]
}

Respuesta #2

Si solo necesitas los tipos de un import, entonces deberías usar import type en su lugar. Eso se introdujo en Typescript 3.8. Importar solo los tipos debería evitar la inclusión de cualquier código real en el paquete.

import type { Counter } from './Counter';

declare global {
  interface Window {
    ExternalCounter: typeof Counter;
  }
}

// Then `ExternalCounter` will be a fully typed interface to the Counter class

Aquí hay un ejemplo completo en StackBlitz. Usé una etiqueta de script y luego importé la definición de la clase desde un archivo .ts y la usé.

Artículos relacionados