示例:导入映射模拟#import map


给定导入映射:

{
  "imports": {
    "react": "./app/node_modules/react/index.js"
  },
  "scopes": {
    "./ssr/": {
      "react": "./app/node_modules/server-side-react/index.js"
    }
  }
}
{
  "dependencies": true,
  "scopes": {
    "": {
      "cascade": true,
      "dependencies": {
        "react": "./app/node_modules/react/index.js"
      }
    },
    "./ssr/": {
      "cascade": true,
      "dependencies": {
        "react": "./app/node_modules/server-side-react/index.js"
      }
    }
  }
}

导入映射假定您可以默认获取任何资源。 这意味着策略顶层的 "dependencies" 应设置为 true。 策略要求选择加入,因为它启用了应用程序交叉链接的所有资源,这对许多场景没有意义。 它们还假设任何给定的范围都可以访问超出其允许依赖项的任何范围;所有模拟导入映射的范围都必须设置 "cascade": true

导入映射只有一个顶级作用域用于其 "imports"。 所以为了模拟 "imports" 使用 "" 范围。 为了模拟 "scopes",使用 "scopes" 的方式与 "scopes" 在导入映射中的工作方式类似。

注意事项:策略不使用字符串匹配来寻找各种范围。 它们做 URL 遍历。 这意味着像 blob:data: URL 之类的东西可能无法在两个系统之间完全互操作。 例如导入映射可以通过在 / 字符上对 URL 进行分区来部分匹配 data:blob: URL,策略故意不能。 对于 blob: URL,导入映射范围不采用 blob: URL 的来源。

此外,导入映射仅适用于 import,因此可能需要向所有依赖项映射添加 "import" 条件。

Given an import map:

{
  "imports": {
    "react": "./app/node_modules/react/index.js"
  },
  "scopes": {
    "./ssr/": {
      "react": "./app/node_modules/server-side-react/index.js"
    }
  }
}
{
  "dependencies": true,
  "scopes": {
    "": {
      "cascade": true,
      "dependencies": {
        "react": "./app/node_modules/react/index.js"
      }
    },
    "./ssr/": {
      "cascade": true,
      "dependencies": {
        "react": "./app/node_modules/server-side-react/index.js"
      }
    }
  }
}

Import maps assume you can get any resource by default. This means "dependencies" at the top level of the policy should be set to true. Policies require this to be opt-in since it enables all resources of the application cross linkage which doesn't make sense for many scenarios. They also assume any given scope has access to any scope above its allowed dependencies; all scopes emulating import maps must set "cascade": true.

Import maps only have a single top level scope for their "imports". So for emulating "imports" use the "" scope. For emulating "scopes" use the "scopes" in a similar manner to how "scopes" works in import maps.

Caveats: Policies do not use string matching for various finding of scope. They do URL traversals. This means things like blob: and data: URLs might not be entirely interoperable between the two systems. For example import maps can partially match a data: or blob: URL by partitioning the URL on a / character, policies intentionally cannot. For blob: URLs import map scopes do not adopt the origin of the blob: URL.

Additionally, import maps only work on import so it may be desirable to add a "import" condition to all dependency mappings.