|
| 1 | +# vite-plugin-jspm |
| 2 | + |
| 3 | +> Import maps: a way to control the behavior of JavaScript imports. [WICG/import-maps](https://github.com/WICG/import-maps) |
| 4 | +
|
| 5 | +> 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](https://www.cloudflare.com/en-ca/learning/cdn/what-is-a-cdn/) |
| 6 | +
|
| 7 | +A vite plugin which externalizes dependencies and resolves them independently from **CDN (Content Delivery Network) providers** using [import maps](https://github.com/WICG/import-maps) and [es-module-shims](https://github.com/guybedford/es-module-shims)! |
| 8 | +This plugin generates an import map for your app automatically in both development and production, and resolves dependencies based on that. |
| 9 | + |
| 10 | +It is based on [@jspm/generator](https://github.com/jspm/generator) which supports different providers like _jspm_, _unpkg_ and _skypack_. |
| 11 | + |
| 12 | +## Usage |
| 13 | + |
| 14 | +```ts |
| 15 | +import { defineConfig } from "vite"; |
| 16 | +import jspmPlugin from "vite-plugin-jspm"; |
| 17 | + |
| 18 | +export default defineConfig({ |
| 19 | + plugins: [jspmPlugin()], |
| 20 | +}); |
| 21 | +``` |
| 22 | + |
| 23 | +## Custom options |
| 24 | + |
| 25 | +### `inputMap` |
| 26 | + |
| 27 | +`inputMap` is a `@jspm/generator` option. When passed, the plugin takes it as source of truth. And resolves the imports against it. |
| 28 | + |
| 29 | +### `downloadDeps` |
| 30 | + |
| 31 | +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. |
| 32 | + |
| 33 | +### env |
| 34 | + |
| 35 | +`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. |
| 36 | + |
| 37 | +### debug |
| 38 | + |
| 39 | +`debug` let's you skim through the logs during resolution and downloading pahses. |
| 40 | + |
| 41 | +# Bundle size |
| 42 | + |
| 43 | +You can see the bundle size of [`test/basic`](https://github.com/jspm/vite-plugin-jspm/tree/main/test/basic) example in two cases: |
| 44 | + |
| 45 | +``` |
| 46 | +# with this plugin |
| 47 | +vite v4.1.1 building for production... |
| 48 | +✓ 16 modules transformed. |
| 49 | +build/index.html 4.80 kB |
| 50 | +build/assets/index-8f42e5ff.css 9.58 kB │ gzip: 1.64 kB |
| 51 | +build/assets/index-37524fa0.js 14.11 kB │ gzip: 3.71 kB |
| 52 | +
|
| 53 | +# with downloadDeps flag in the plugin |
| 54 | +vite v4.1.1 building for production... |
| 55 | +✓ 45 modules transformed. |
| 56 | +build/index.html 2.42 kB |
| 57 | +build/assets/index-8f42e5ff.css 9.58 kB │ gzip: 1.64 kB |
| 58 | +build/assets/index-38fd63e9.js 187.02 kB │ gzip: 59.80 kB |
| 59 | +``` |
| 60 | + |
| 61 | +# Contribution |
| 62 | + |
| 63 | +Feel free to open issues and PRs! |
0 commit comments