jspm/vite-plugin-jspm

A plugin which externalizes dependencies and resolves them from CDN providers using import maps and es-module-shims!

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:[email protected]/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!

vite-plugin-jspm's Issues

error when starting dev server

as the title, detailed error below

[ERROR] Failed to resolve entry for package "vite-plugin-jspm". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." specifier in "vite-plugin-jspm" package [plugin externalize-deps]
vite version 4.2.1
vite-plugin-jspm version 0.2.0
node version 16.20.0
npm version 9.2.0

as side note, i see version 0.3.0 of vite-plugin-jspm in the repo, but it's not available in npm registry. is that ok?

Dependencies need to be updated

I‘m using TypeScript and Vite 4 + Vue 3, I tried this plugin, it's necessary to install @jspm/generator at the same time if I wanna implement my custom providers.

But I can only install @jspm/generator v1.1.1, otherwise, TypeScript will throw a warning.

jspm:import-mapping plugin never trigger

Seems that the resolveId hook fo the jspm:import-mapping plugin never triggers.
I've npm create vite@latest my-vue-app -- --template vue and added the jspm plugin in my vite config as

export default defineConfig({
  plugins: [jspmPlugin({debug: true}), vue()] 
})

The import map is correctly generated and written in the index.html, but the the output js of the build seems to contain all the modules and when I serve the build directory the browser is not fetching anything from anywhere except the bundle's index.js from the localhost and the es-module-shims.js from ga.jspm.io.

In my package.json i have those deps

  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "vite": "^4.3.2",
    "vite-plugin-jspm": "^0.4.0"
  }

Am I missing some piece of configuration or something trivial?

bug: Uncaught TypeError: Failed to resolve module specifier

Uncaught TypeError: Failed to resolve module specifier "vite/preload-helper". Relative references must start with either "/", "./", or "../".

steps:

1. pnpm build
2. pnpm preview

environment: (a Vue 3 + Vite 4 project)
demo.zip