https://github.com/rajasegar/unpack
Create Web apps without a bundler
https://github.com/rajasegar/unpack
bundler esm esmodules unpack
Last synced: 6 months ago
JSON representation
Create Web apps without a bundler
- Host: GitHub
- URL: https://github.com/rajasegar/unpack
- Owner: rajasegar
- License: mit
- Created: 2020-11-13T06:53:24.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2025-04-08T11:06:26.000Z (6 months ago)
- Last Synced: 2025-04-08T12:23:36.621Z (6 months ago)
- Topics: bundler, esm, esmodules, unpack
- Language: JavaScript
- Homepage:
- Size: 798 KB
- Stars: 40
- Watchers: 2
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# unpack
[](https://npmjs.org/package/@rajasegar/unpack "View this project on npm")
[](https://github.com/semantic-release/semantic-release)
[](https://conventionalcommits.org)
:rocket: Create web apps without a bundler :package:.
unpack is a web app scaffolding tool which generates a project boilerplate with no `npm` dependencies, to develop and build apps within the browser
without any build tooling.
**WARNING**: Not recommended for production workflows.
## Installation
```
npx @rajasegar/unpack
```
Using npm
```
npm i -g @rajasegar/unpack
```
Using yarn
```
yarn add --global @rajasegar/unpack
```
Using pnpm
```
pnpm add --global @rajasegar/unpack
```
## Usage
```
unpack
```
Follow the prompts to choose the Framework (React, Preact or Vue) and CDN (Skypack, jspm or unpkg).
Then switch to the newly created app directory and start a web server, something like [http-server](https://github.com/http-party/http-server) or [servor](https://github.com/lukejacksonn/servor). You are free to choose your own web-server tool, there is no lock-in unlike other bundlers.
```
cd my-react-app
servor . --reload --browse
```
You can also choose from predefined templates for a particular framework using:
```
unpack new --template React --cdn skypack
```
or
```
unpack new my-preact-app -t Preact --cdn skypack
```
The `--template` option can have the following values:
- React
- Preact
- Vue
- Vue3
- lit-element
- hyperapp
- RxJS
- Cycle
The `--cdn` option can have the following values:
- jspm
- skypack
- unpkg
- esm
- jsdelivr
- esm.run
## index.html (generated)
```html
hello
{
"imports": {
"react": "https://cdn.skypack.dev/react?min",
"react-dom": "https://cdn.skypack.dev/react-dom?min",
"htm": "https://cdn.skypack.dev/htm?min"
}
}
import React from "react";
import ReactDOM from "react-dom";
import htm from "htm";
const html = htm.bind(React.createElement);
const App = () => html`<h1>Hello React from skypack</h1>`;
ReactDOM.render(html`<${App}/>`, document.getElementById('app'));
```
## How does it work?
It makes use of CDN for delivering ESM compatible JS to the browser for your favorite JS libraries and frameworks so that you can make use of the module scripts to run code inside your browser.
It also makes use of [import maps](https://github.com/wicg/import-maps) to enhance the developer experience to map the absolute package urls to user-friendly names so that you don't have to write import statements like:
```js
import React from 'https://unpkg.com/react@17/umd/react.production.min.js';
```
Instead you can simply use:
```js
import React from 'react';
```
Import maps are not yet mainstream, since not all the browsers implemented them and Chrome supports it behind a [feature flag](https://developers.chrome.com/extensions/experimental). That's why unpack includes the [es-module-shims](https://github.com/guybedford/es-module-shims) script to work with import maps.
## Support Matrix
| Framework/CDN | Skypack | jspm | unpkg | esm.sh | jsdelivr | esm.run |
|---------------|--------------------|--------------------|--------------------|--------------------|--------------------|--------------------|
| React | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: |
| Preact | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Vue | :x: | :heavy_check_mark: | :x: | :x: | :x: | :x: |
| Vue 3 | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | :x: | :x: |
| lit-element | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: |
| hyperapp | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: | :heavy_check_mark: | :heavy_check_mark: |
| Cycle.js | :x: | :heavy_check_mark: | :x: | :heavy_check_mark: | :x: | :x: |
| RxJS | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: |
Edited the above Markdown table with [tablesgenerator.com](https://www.tablesgenerator.com/markdown_tables)
## CDN Support
- [Skypack](https://skypack.dev)
- [jspm](https://jspm.dev)
- [unpkg](https://unpkg.com)
- [esm.sh](https://esm.sh)
- [jsdelivr](https://cdn.jsdelivr.net)
- [esm.run](https://esm.run)
## Framework Support
- [React](https://reactjs.org)
- [Vue.js](https://vuejs.org)
- [Preact](https://preactjs.com)
- [lit-element](https://lit-element.polymer-project.org/)
- [hyperapp](https://github.com/jorgebucaran/hyperapp)
- [RxJS](https://rxjs-dev.firebaseapp.com/)
- [Cycle.js](https://cycle.js.org)
## Bundling for production
Work in progress...
## Known issues
- Vue template works only with jspm