vite-plugin-externals

transform simple webpack externals configuration for vite.

Install

yarn add -D vite-plugin-transform-externals

Usage

in your vite.config.ts

import TransformExternals from 'vite-plugin-transform-externals'

const externals = {
  react: 'React',
  '@ant-design/icons': 'AntDesignIcons',
  'antd/lib/locale-provider/zh_CN': ['antd', 'locales', 'zh_CN'],
  'rc-queue-anim': "window['rc-queue-anim']",
}

export default defineConfig({
  plugins: [
    TransformExternals({
      externals,
      // globalName: 'globalThis', // optional, default is window
    }),
  ]
})

Examples

• default import

import antd from 'antd'

⬇️ ⬇️ ⬇️

const antd = window['antd']

• named import

import { Spin as AntSpin, Button } from "antd"

⬇️ ⬇️ ⬇️

const {
  US: US
} = window['antd']['locales']['en_US'];

• as default import

import * as React from 'react'

⬇️ ⬇️ ⬇️

const React = window['React']

• type import

import type { ReactComponent } from 'react'

⬇️ ⬇️ ⬇️

// empty string

• decect the external global variable format, for example { 'rc-queue-anim': window["rc-queue-anim"]'' }

import QueueAnim from 'rc-queue-anim'

⬇️ ⬇️ ⬇️

const QueueAnim = window['rc-queue-anim'];

• decect the external global variable format, for example { events: 'global.events' }

import Events from 'events'

⬇️ ⬇️ ⬇️

const Events = global.events;

• configurable global variable, default "window", can be window, global or globalThis.