search

jspm / vite-plugin-jspm

A plugin which externalizes dependencies and resolves them from CDN providers using import maps and es-module-shims!
MIT License
60 stars 9 forks source link
cdn es-module-shims import-maps jspm plugin skypack unpkg vite

readme

vite-plugin-jspm

Import maps: a way to control the behavior of JavaScript imports. WICG/import-maps

CDN: A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. Cloudflare.com

A vite plugin which externalizes dependencies and resolves them independently from CDN (Content Delivery Network) providers using import maps and es-module-shims! This plugin generates an import map for your app automatically in both development and production, and resolves dependencies based on that.

It is based on @jspm/generator which supports different providers like jspm, unpkg and skypack.

Usage

import { defineConfig } from "vite";
import jspmPlugin from "vite-plugin-jspm";

export default defineConfig({
  plugins: [jspmPlugin()],
});

Custom options

inputMap

inputMap is a @jspm/generator option. When passed, the plugin takes it as source of truth. And resolves the imports against it.

downloadDeps

When passed, downloads the dependencies and bundles them with the build. But in dev mode vite dev, the plugin serves the dependencies from the CDN.

env

env is a @jspm/generator option. Users don't need to pass production or development option. The env is applied according to the vite env.

debug

debug let's you skim through the logs during resolution and downloading pahses.

pollyfillProvider

pollyfillProvider allow users to define their own pollyfill provider instead of ga.jspm.io, it can be a function (version: string) => string or a string. For function, the parameter version is es-module-shims's version, user should return a complete url like https://ga.jspm.io/npm:es-module-shims@1.8.0/dist/es-module-shims.js.

Bundle size

You can see the bundle size of test/basic example in two cases:

# with this plugin
vite v4.1.1 building for production...
✓ 16 modules transformed.
build/index.html                  4.80 kB
build/assets/index-8f42e5ff.css   9.58 kB │ gzip: 1.64 kB
build/assets/index-37524fa0.js   14.11 kB │ gzip: 3.71 kB

# with downloadDeps flag in the plugin
vite v4.1.1 building for production...
✓ 45 modules transformed.
build/index.html                   2.42 kB
build/assets/index-8f42e5ff.css    9.58 kB │ gzip:  1.64 kB
build/assets/index-38fd63e9.js   187.02 kB │ gzip: 59.80 kB

Contribution

Feel free to open issues and PRs!