English | 简体中文

vite-plugin-externals-extension

A Vite/Rollup plugin which support external link. Inspired by Webpack. Support for vite versions including 2.x and 3.x, enjoy!

Install

pnpm install vite-plugin-externals-extension -D

or

yarn add vite-plugin-externals-extension -D

Usage

Configure plugin like the following example to take effect without modifying any other information. support configuration links including CJS and ESM( recommended skypack links).

// vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { compatLowVersion, externalsExtension } from 'vite-plugin-externals-extension'

export default defineConfig({
  plugins: [
    react(),
    externalsExtension({
      htm: {
        url: 'https://cdn.skypack.dev/htm'
      },
      lodash: {
        url: 'https://cdn.skypack.dev/lodash',
      },
      redux: {
        getter: (window) => {
          return window.Redux;
        },
        url: 'https://cdn.bootcdn.net/ajax/libs/redux/4.2.0/redux.min.js'
      },
      react: {
        url: 'https://cdn.skypack.dev/pin/[email protected]/mode=imports/optimized/react.js',
      }
    })
  ],
  // The vite version above 2.2.0 does not require additional injection of "external".
  build: {
    rollupOptions: {
      external: await compatLowVersion()
    }
  }
})

⚠️ Note:

1. Considering the type dependency of ts on dependent modules and the hidden injection of sub-dependent modules, the modules that the project depends still need to be installed, but only need to install `dev' dependencies, which will not affect the package size at the time of production.
2. For the dependent vite version in the 2.0.0 ~ 2.2.0 interval, because async plugin config is not supported, external needs to be added manually. Just inject the following code:

 {
  build: {
    rollupOptions: {
      external: await compatLowVersion()
    }
  }
 }

Configuration

The configuration type of plugin interface is as follows. The usage is a little similar to webpack, it may be clear at a glance through the above examples.

interface ExternalExtensionType {
  [key: string]: {
    getter?: string | ((window: any) => any);
    url: string | (() => Promise<string>);
  }
}

⚠️ Note:

getter is an optional attribute which is no need to configure getter hooks when using ESM links, which is created for adapt to different CJS packages.

url is a required option to configure the dependent external links you need. If you need asynchronous link need, also suits your appetite.

Example projects

You can use the example v2.x or the example v3.x in the project to make a demonstration or debug according to your needs.