乐趣区

关于chrome:importmaps

jiezi

在试用 Deno 的时候为依赖引入形式而困扰，按原始的引入形式依赖很难保护，查问相干文章，有举荐用独自 deps.ts 文件来保护，当然也有很多插件能够反对 Node 或者相似 Node 的保护计划。
官网手册里有提及另一个比拟有意思的规范计划 import-maps，而且此计划是曾经在 Chrome89 中反对的。

import-maps

这个提案扩大了 import 的机制，应用 <script type="importmap"></script> 标签，能够配置 import 信息。

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

这样在网页上就能间接应用 import lodash from "lodash"; 语法间接引入模块，浏览器会主动解析成 import lodash from "/node_modules/lodash-es/lodash.js";

也能够应用 <script> 标签 src 属性来引入 

<script type="importmap" src="import-map.importmap"></script>

具体的能够查看文章底下的相干材料。

Deno import-maps

import-maps 能够让资源集中在一起保护，Deno 中应用恰好能够应用此形式来治理依赖。只有建设一个 import-maps 保护文件，而后在启动的时候带上参数 --import-map=<FILE> 即可开启。

官网手册的例子：

建设一个 import_map.json 文件，其中写入依赖信息 

{
   "imports": {"fmt/": "https://deno.land/std@0.103.0/fmt/"}
}

color.ts 文件中引入应用 

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

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

启动 

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

也能够用此形式配置根门路拜访或者其余门路的别名 

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

Trex

当然，手动增加和删除毕竟还是比拟麻烦，社区也早有人提供了相干工具 Trex

装置

deno 版本须要大于等于 1.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
应用

装置依赖 

trex i --map fs http fmt

--map 参数是从 deno.land/x 来装置

增加自定义资源的依赖 

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

删除依赖 

trex delete React

当然，运行的时候依赖须要将 import-maps 的配置文件传入启动。

所以 Trex 也提供相似 NPM Script 的性能，只须要增加 run.json 文件，其中写入相干配置 

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

应用 trex run start 即可启动，其中 --perms env,read,write,net 是 Trex 提供的权限快捷写法，同时 run 执行时也反对传参。具体的能够查看相干文档理解。

相干材料

W3C import-maps
Javascript Import maps
deno import_maps

退出移动版