vite-plugin-https-imports

A Vite plugin to bundle ESModules imported from remote URLs (e.g. CDNs).

<script type="module">
  // 👇 import from a remote library
  import { something } from 'https://esm.sh/somelib'

  // ...
</script>

// vite.config.js
import httpsImports from 'vite-plugin-https-imports'

export default {
  plugins: [
    // 👇 include the plugin in Vite config
    httpsImports()
  ]
}

vite build
# ☝ this will now download and bundle contents and
#   dependencies of https://esm.sh/somelib for faster 
#   loading on production without request waterfalls.

Contents

• Contents
• Installation
• Usage
• Contribution

Installation

Node:

npm i vite-plugin-https-imports

Browser / Deno:

import httpsImports from 'https://esm.sh/vite-plugin-https-imports'

Usage

Importing modules from some remote (e.g. CDNs such as esm.sh or Skypack) cool (and also allows specifying dependencies where they are needed, instead of in some other tool's configuration). However, using them means browsers will have to send at least one request (typically more) for each dependency, resulting in slow loading times.

vite-plugin-https-imports resolves that issue for Vite. In development, it skips such imports so your browser will load them. During build time, it downloads the dependencies (and their dependencies) and has Vite bundle them, which allows you to have the best of both worlds.

STEP 1: Import a module from some remote, for example in a script tag:

<script type="module">
  import { something } from 'https://esm.sh/somelib'

  // ...
</script>

Or in a JS/TS file:

import { something } from 'https://esm.sh/somelib'

// ...

STEP 2: Add the plugin to your Vite config:

// vite.config.js
import httpsImports from 'vite-plugin-https-imports'

export default {
  plugins: [
    httpsImports()
  ]
}

STEP 3: Build your app:

vite build

Configuration

The plugin accepts the following configs:

• include: The URL patterns to include. If no pattern is given, all URLs starting with https:// will be included. You can pass strings (globs), regular expressions, arrays, functions, etc.

// vite.config.js
import httpsImports from 'vite-plugin-https-imports'

export default {
  plugins: [
    httpsImports({
      include: [
        'https://esm.sh/**',
        /https:\/\/cdn\.skypack\.dev\//,
        url => url.startsWith('https://unpkg.com/'),
      ]
    })
  ]
}

ONLY HTTPS URLS ARE INCLUDED

• exclude: The URL patterns to exclude. If no pattern is given, no URLs will be excluded. You can pass strings (globs), regular expressions, arrays, functions, etc.

// vite.config.js
import httpsImports from 'vite-plugin-https-imports'

export default {
  plugins: [
    httpsImports({
      exclude: [
        'https://esm.sh/somelib',
        /somelib/,
        url => url.includes('somelib'),
      ]
    })
  ]
}

• silent: Whether to log downloaded files or not. By default will log the downloaded files.

Contribution

You need node, NPM to start and git to start.

# clone the code
git clone git@github.com:loreanvictor/vite-plugin-https-imports.git

# install stuff
npm i

Make sure all checks are successful on your PRs. This includes all tests passing, high code coverage, correct typings and abiding all the linting rules. The code is typed with TypeScript, Jest is used for testing and coverage reports, ESLint and TypeScript ESLint are used for linting. Subsequently, IDE integrations for TypeScript and ESLint would make your life much easier (for example, VSCode supports TypeScript out of the box and has this nice ESLint plugin), but you could also use the following commands:

# run tests
npm test

# check code coverage
npm run coverage

# run linter
npm run lint

# run type checker
npm run typecheck