@yellowspot/vite-plugin-externals

vite-plugin-externals

Use external resources, like webpack externals

Install

npm i @yellowspot/vite-plugin-externals -D

Usage

import externals from '@yellowspot/vite-plugin-externals'

export default {
  plugins: [
    externals({
      jquery: `jQuery`,
    }),
  ]
}

How it works

Let's use jQuery as an example

externals({
  jquery: `window.jQuery`,
})

1. It creates node_modules/.@yellowspot_vite-plugin-externals/jquery.cjs containing the following code

module.exports = window.jQuery;

1. It registers a jquery alias item adding it to resolve.alias

{
  resolve: {
    alias: [
      {
        find: 'jquery',
        replacement: '/User/work-directory/node_modules/.@yellowspot_vite-plugin-externals/jquery.cjs',
      },
    ],
  },
}

Motivation

While migrating a project from webpack to vite, we needed a way to mimic webpack's externals. We found vite-plugin-external which does an excellent job. I couldn't use it because on build it relies on rollup global option which only works if the output format is umd / iife (see docs here).

We also tried vite-plugin-resolve without good results.

That's why we decided to write our own plugin on top of vite-plugin-optimizer