typescript - چگونه میتوان Vite را از وارد کردن/باندل کردن یک وابستگی خارجی بازداشت

من چندین کتابخانه دارم که مجبورم از طریق تگهای <script> آنها را وارد کنم. با این حال، همچنان میخواهم از دستورات import معادل در فایل .ts خود برای آن کتابخانههای خارجی استفاده کنم، تا تایپدهی مناسب را داشته باشم. چگونه به Vite بگویم که این واردات خاص را بستهبندی نکند و دستورات import مربوط به آنها را حذف کند؟

پاسخ شماره ۱

این بسیار سختتر از چیزی است که باید باشد، اما من بالاخره راهی پیدا کردم تا کتابخانههای وارد شده از خارج را در بستهبندی خود نادیده بگیرم، با تشکر از افزونه rollup-plugin-hypothetical و یک فورک خاص از افزونه rollup-plugin-postprocess. افزونههای Rollup با Vite سازگار هستند. افزونه hypothetical کد را از بسته حذف میکند، و افزونه postprocess به شما اجازه میدهد واردات را از بسته از طریق regex حذف کنید. توجه داشته باشید که من تمام واردات را حذف میکنم -- اگر شما فقط نیاز به حذف برخی دارید، regex افزونه postprocess شما متفاوت خواهد بود.

افزونهها را با npm نصب کنید:

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

نمونه vite.config.js با ۳ ماژول نودی که میخواستم حذف کنم:

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

پاسخ شماره ۲

اگر شما فقط به نوعها از یک import نیاز دارید، باید از import type استفاده کنید. این مورد در Typescript 3.8 معرفی شد. تنها وارد کردن نوعها باید از بستهبندی هر کد واقعی جلوگیری کند.

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

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

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

در اینجا یک مثال کامل در StackBlitz آورده شده است. من از تگ script استفاده کردم و سپس تعریف کلاس را از یک فایل .ts وارد کرده و از آن استفاده کردم.