使用 es-module-shims polyfill 在 Firefox v107 上导入 Map 不适用于动态导入

Question

我在我的网站上使用导入地图（根据caniuse.com ）在 Firefox v107 或最新（非 TP）版本的 Safari 上不受支持。我认为es-module-shims polyfill 库会添加支持，但它似乎没有用。

一旦我在about:config中启用导入地图（或当我在 Chrome 上访问我的页面时），我的代码就可以完美运行，但相同的代码会在 Firefox v107 的控制台中引发错误。

我是在错误地使用 polyfill 还是在做一些不受支持的事情？

我在页面的<head>中有这段代码：

<script src="//unpkg.com/es-module-shims/dist/es-module-shims.js"></script>
<script type="importmap">
    {
        "imports": {
            "three/examples/fonts/": "./node_modules/three/examples/fonts/",
            "three/examples/jsm/": "./node_modules/three/examples/jsm/",
            "three": "./node_modules/three/build/three.module.js"
        }
    }
</script>
<script type="module" defer src="index.js"></script>

在我的index.js中，我有一个动态导入：

if (location.pathname === "/" || location.pathname === "/index.html") {
    import("./module/hero.js");
}

在我的module/hero.js的顶部，我有一个 static 导入到 Three.js：

import * as THREE from "three";

Answer 1

@Arcanist是对的：在“垫片模式”下使用 ES 模块垫片，分别使用“importmap-shim”和“module-shim”，而不是“importmap”和“module”。 ES 模块垫片也需要加载“异步”属性（参见用法）。

 <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1.6.2/dist/es-module-shims.min.js"></script> <script type="importmap-shim"> { "imports": { "three/examples/fonts/": "./node_modules/three/examples/fonts/", "three/examples/jsm/": "./node_modules/three/examples/jsm/", "three": "./node_modules/three/build/three.module.js" } } </script> <script type="module-shim" src="index.js"></script>

Answer 2

以下我能够使用 Safari 16，我测试过的所有现代浏览器以及 OP 的 FF 107 -- https://codepen.io/btopro/pen/zYLpNpG?editors=1000

 <script async src="https://unpkg.com/es-module-shims"></script> <script type="importmap"> { "imports": { "lit": "https://unpkg.com/lit", "lit-html": "https://unpkg.com/lit-html", "lit-html/": "https://unpkg.com/lit-html/", "lit-element/": "https://unpkg.com/lit-element/", "@lit/": "https://unpkg.com/@lit/" } } </script> <script type="module"> import {html, css, LitElement} from 'lit'; export class SimpleGreeting extends LitElement { static styles = css`p { color: blue }`; static properties = { name: {type: String}, }; constructor() { super(); this.name = 'Somebody'; } render() { return html`<p>Hello, ${this.name};</p>`. } } customElements,define('simple-greeting'; SimpleGreeting); </script> <simple-greeting name="World"></simple-greeting> <simple-greeting name="World"></simple-greeting>

使用 es-module-shims polyfill 在 Firefox v107 上导入 Map 不适用于动态导入

问题描述

2 个解决方案

解决方案1
0 2022-12-27 21:01:27

解决方案2
0 2023-01-20 15:22:35

使用 es-module-shims polyfill 在 Firefox v107 上导入 Map 不适用于动态导入

问题描述

2 个解决方案

解决方案1 0 2022-12-27 21:01:27

解决方案2 0 2023-01-20 15:22:35

解决方案1
0 2022-12-27 21:01:27

解决方案2
0 2023-01-20 15:22:35