使用 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