typescript - Cum să faci ca Vite să nu importe/împacheteze o dependență externă

Am mai multe biblioteci pe care sunt obligat să le includ prin intermediul tag-urilor <script>. Cu toate acestea, aș dori totuși să folosesc declarațiile echivalente import în fișierul meu .ts pentru acele biblioteci externe, astfel încât să obțin tipizarea corespunzătoare. Cum îi spun lui Vite să nu grupeze acele importuri particulare și să elimine declarațiile import pentru acestea?

Răspuns #1

Acest lucru este mult mai greu decât ar trebui să fie, dar în cele din urmă am găsit o modalitate de a ignora librăriile incluse extern în pachetul meu datorită pluginului rollup-plugin-hypothetical și unui fork specific al pluginului rollup-plugin-postprocess. Pluginurile Rollup sunt compatibile cu Vite. Pluginul hypothetical elimină codul din pachet, iar pluginul postprocess vă permite să eliminați importurile din pachet folosind regex. Rețineți că eu elimin toate importurile -- dacă aveți nevoie să eliminați doar unele, atunci regexul din postprocess va fi diferit.

Instalează pluginurile cu npm:

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

Exemplu vite.config.js cu cele 3 module node pe care am vrut să le exclud:

// 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[^;]*/, '']
        ])
    ]
}

Răspunsul #2

Dacă ai nevoie doar de tipurile dintr-un import, atunci ar trebui să folosești import type în schimb. Aceasta a fost introdusă în Typescript 3.8. Importarea doar a tipurilor ar trebui să împiedice împachetarea oricărui cod efectiv.

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

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

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

Iată un exemplu complet pe StackBlitz. Am folosit un tag script și apoi am importat definiția clasei dintr-un fișier .ts și am folosit-o.