Skip to content

Commit

Permalink
release: v0.2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
JayaKrishnaNamburu committed Feb 16, 2023
1 parent 9524f9d commit 722c50d
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 1 deletion.
63 changes: 63 additions & 0 deletions plugin/Readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
# vite-plugin-jspm

> Import maps: a way to control the behavior of JavaScript imports. [WICG/import-maps](https://github.com/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](https://www.cloudflare.com/en-ca/learning/cdn/what-is-a-cdn/)
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)!
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](https://github.com/jspm/generator) which supports different providers like _jspm_, _unpkg_ and _skypack_.

## Usage

```ts
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.

# Bundle size

You can see the bundle size of [`test/basic`](https://github.com/jspm/vite-plugin-jspm/tree/main/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!
2 changes: 1 addition & 1 deletion plugin/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vite-plugin-jspm",
"version": "0.1.0",
"version": "0.2.0",
"type": "module",
"scripts": {
"build": "rimraf dist && rollup -c",
Expand Down

0 comments on commit 722c50d

Please sign in to comment.