Skip to content

Commit 722c50d

Browse files
release: v0.2.0
1 parent 9524f9d commit 722c50d

File tree

2 files changed

+64
-1
lines changed

2 files changed

+64
-1
lines changed

plugin/Readme.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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!

plugin/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vite-plugin-jspm",
3-
"version": "0.1.0",
3+
"version": "0.2.0",
44
"type": "module",
55
"scripts": {
66
"build": "rimraf dist && rollup -c",

0 commit comments

Comments
 (0)