Skip to content

Latest commit

 

History

History
91 lines (73 loc) · 2.75 KB

readme.md

File metadata and controls

91 lines (73 loc) · 2.75 KB
Raw

jspmi

A utility to install some NPM dependencies and to push them into an importmap file at once, based on the JSPM Generator.

install

npm i jspmi -g

Commands

The install command

  • jspmi install [options] <dependencies...>
  • jspmi i [options] <dependencies...>

The uninstall command

  • jspmi uninstall [options] <dependencies...>
  • jspmi un [options] <dependencies...>

Options

  • -c jspmi.config.json/--config jspmi.config.json

Configuration

{
  "installer": "npm",
  "map": "production.importmap",
  "settings": {
    "env": ["production", "browser"]
  },
  "locals": {
    "/assets/js/dist.js": "/assets/js/main.js"
  }
}
  • installer: your preferred module installer (npm, pnpm, ...)
  • map: the input/output file path
  • settings: your JSPM Generator settings
  • locals: optional, your website modules, useful to make a progressive importmap support.

Install Example

# Installing the anticore components
jspmi i anticore anticore/defaults.js anticore/trigger.js
# Installs the anticore basic contracts
jspmi i @anticore-contracts/tree-insert/on.js @anticore-contracts/tree-view/on.js
  • Installs the NPM dependencies
  • Generates the following importmap
{
  "imports": {
    "@anticore-contracts/tree-insert/on.js": "https://ga.jspm.io/npm:@anticore-contracts/[email protected]/on.js",
    "@anticore-contracts/tree-view/on.js": "https://ga.jspm.io/npm:@anticore-contracts/[email protected]/on.js",
    "anticore": "https://ga.jspm.io/npm:[email protected]/index.js",
    "anticore/defaults.js": "https://ga.jspm.io/npm:[email protected]/defaults.js",
    "anticore/trigger.js": "https://ga.jspm.io/npm:[email protected]/trigger.js",
    "/assets/js/dist.js": "/assets/js/main.js"
  }
}

Then you can include it into your HTML or SVG layout, like:

<script type="importmap">
{
  "imports": {
    "@anticore-contracts/tree-insert/on.js": "https://ga.jspm.io/npm:@anticore-contracts/[email protected]/on.js",
    "@anticore-contracts/tree-view/on.js": "https://ga.jspm.io/npm:@anticore-contracts/[email protected]/on.js",
    "anticore": "https://ga.jspm.io/npm:[email protected]/index.js",
    "anticore/defaults.js": "https://ga.jspm.io/npm:[email protected]/defaults.js",
    "anticore/trigger.js": "https://ga.jspm.io/npm:[email protected]/trigger.js",
    "/assets/js/dist.js": "/assets/js/main.js"
  }
}
</script>
<script type="module">import '/assets/js/dist.js'</script>

Which imports '/assets/js/dist.js', targeting your bundle on the browsers which doesn't support the importmap, but targeting the non-bundled entrypoint, resolved by the importmap, on the others.

License

MIT