import-maps & Deno

Time:2022-1-2

On trialDenoIt’s hard to maintain the dependency according to the original import method. Query relevant articles and make recommendations separatelydeps.tsFiles to maintain, of course, there are many plug-ins to supportNodeOr something like thatNodeMaintenance plan.
Another interesting standard scheme is mentioned in the manual on the official websiteimport-mapsAnd this scheme is already in useChrome89Supported in.
import-maps & Deno

import-maps

The proposal expandsimportMechanism, use<script type="importmap"></script>Label, configurableimportInformation.

<script type="importmap">
{
  "imports": {
    "/app/helper": "node_modules/helper/index.mjs",
    "lodash": "/node_modules/lodash-es/lodash.js"
  }
}
</script>

So you can use it directly on the web pageimport lodash from "lodash";The syntax is directly introduced into the module, and the browser will automatically parse it intoimport lodash from "/node_modules/lodash-es/lodash.js";

You can also use<script>labelsrcProperty to introduce

<script type="importmap"></script>

For details, you can see the relevant materials at the bottom of the article.

Deno import-maps

import-mapsResources can be maintained together,DenoYou can use this approach to manage dependencies. Just build oneimport-mapsMaintain files and bring parameters when starting--import-map=<FILE>It can be opened.

Examples of official website manuals:

Build aimport_map.jsonFile where dependency information is written

{
   "imports": {
      "fmt/": "https://deno.land/[email protected]/fmt/"
   }
}

color.tsFile

import { red } from "fmt/colors.ts";

console.log(red("hello world"));

start-up

deno run --import-map=import_map.json color.ts

You can also configure root path access or alias of other paths in this way

{
  "imports": {
    "/": "./",
    "./": "./",
    "@": "./"
  }
}

Trex

Of course, manual addition and deletion are still troublesome after all, and some people in the community have already provided relevant toolsTrex

install

denoVersion must be greater than or equal to1.10.2

deno install -A --unstable --import-map=https://deno.land/x/trex/import_map.json -n trex --no-check https://deno.land/x/trex/cli.ts
use

Installation dependency

trex i --map fs http fmt

--mapParameters are fromdeno.land/xTo install

Add dependencies for custom resources

trex --custom React=https://dev.jspm.io/react/index.js

Delete dependency

trex delete React

Of course, runtime dependencies need to beimport-mapsIncoming configuration file for startup.

thereforeTrexSimilar services are providedNPM ScriptYou just need to addrun.jsonFile where the relevant configuration is written

 {
  "scripts": {
    "start": "trex exec --perms env,read,write,net denon run ./app.ts",
    "dev": "denon run ./app.ts",
    "build": "aleph build"
  }
}

usetrex run startCan be started, where--perms env,read,write,netyesTrexThe shortcut writing method of the provided permission, andrunParameter transfer is also supported during execution. For details, please refer to relevant documents.

Relevant information

W3C import-maps
Javascript Import maps
deno import_maps