关于chrome:importmaps

101次阅读

共计 1624 个字符,预计需要花费 5 分钟才能阅读完成。

在试用 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,netTrex 提供的权限快捷写法,同时 run 执行时也反对传参。具体的能够查看相干文档理解。

相干材料

W3C import-maps
Javascript Import maps
deno import_maps

正文完
 0