importmapを手書きするとつらいこと

VSCodeがinvalidなJSONを検出してくれない

VSCodeが次のようなInvalidなJSONをかいても検知してくれないこと。

  <script type="importmap">
    {
      "imports": {
        "action-stream": './node_modules/action-stream/index.mjs',
      }
    }
  </script>

JSONなので、シングルクォートもケツカンマも許容されません。 つぎの拡張、json-in-htmlを使うと解決できます。

marketplace.visualstudio.com

importmap中のInvalidなJSONにエラーが表示される

現時点ではケツカンマは検出されないようです。

量

例えば、次のように無限に拡張子かindex.jsを補完していく必要があります。

  <script type="importmap">
    {
      "imports": {
        "action-stream": "./node_modules/action-stream/index.mjs",
        "debounce": "./node_modules/debounce/index.js",
        "./lib/stream/actionStream/table/EdgeTableActionStream": "./lib/stream/actionStream/table/EdgeTableActionStream.js",
        "./lib/stream/actionStream/table/NodeTableActionStream": "./lib/stream/actionStream/table/NodeTableActionStream.js",
        "./lib/stream/actionStream/AddEmptyNodeActionStream": "./lib/stream/actionStream/AddEmptyNodeActionStream.js",
        "./lib/stream/actionStream/EdgeActionStream": "./lib/stream/actionStream/EdgeActionStream.js",
        "./lib/stream/actionStream/GraphActionStream": "./lib/stream/actionStream/GraphActionStream.js",
        "./lib/stream/actionStream": "./lib/stream/actionStream/index.js",
        "./lib/stream/actionStream/KeyboardActionStream": "./lib/stream/actionStream/KeyboardActionStream.js",
        "./lib/stream/actionStream/LayoutActionStream": "./lib/stream/actionStream/LayoutActionStream.js",
        "./lib/stream/actionStream/NodeActionStream": "./lib/stream/actionStream/NodeActionStream.js",
        "./lib/stream/modelStream": "./lib/stream/modelStream/index.js",
        "./lib/stream/renderStream/graph": "./lib/stream/renderStream/graph/index.js",
        "./lib/stream/renderStream": "./lib/stream/renderStream/index.js",
        "./lib/stream/renderStream/MappingsRenderStream": "./lib/stream/renderStream/MappingsRenderStream.js",
        "./lib/stream/renderStream/PgpRenderStream": "./lib/stream/renderStream/PgpRenderStream.js",
        "./lib/stream/const": "./lib/stream/const.json",
        "./lib/view/forceDirectedLayoutComponent": "./lib/view/forceDirectedLayoutComponent.js",
        "./lib/view/mappingsComponent": "./lib/view/mappingsComponent.js",
        "./lib/createHtmlElement": "./lib/createHtmlElement.js"
      }
    }
  </script>

何がつらいって、これで半分くらいなこと。 それから、全部書いても、CommonJSモジュールで書かれているnpmパッケージが読み込めなくて動かない未来が予測される事です。