@rajasegar/unpack

v1.8.4

Published

2 years ago

Create web apps without a bundler

Downloads

0High
0Medium
0Low

rajasegar

unpack bundler cdn esm

unpack

: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 or 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 <project-name> --template React --cdn skypack

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)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hello</title>
</head>
<body>
  <div id="app"></app>
  <script type="module" src="https://jspm.dev/es-module-shims"></script>
  <script type="importmap-shim">
  {
    "imports": {
      "react": "https://cdn.skypack.dev/react?min",
      "react-dom": "https://cdn.skypack.dev/react-dom?min",
      "htm": "https://cdn.skypack.dev/htm?min"
    }
  }
  </script>
  <script type="module-shim">
    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'));
  </script>
</body>
</html>

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 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:

import React from  'https://unpkg.com/react@17/umd/react.production.min.js';

Instead you can simply use:

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. That's why unpack includes the 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

CDN Support

Framework Support

Bundling for production

Work in progress...

Known issues

Vue template works only with jspm

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme