Import Map 演示 - 浏览器端模块映射实验

在右侧的 JavaScript 代码编辑器 中编写你的模块代码。以 React 18 为例：

// 导入 React 模块（使用 Import Map 中定义的标识符）
import React, { useState } from "react";
import { createRoot } from "react-dom/client";

// 定义组件
function Counter() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <h2>计数器：{count}</h2>
            <button onClick={() => setCount(c => c + 1)}>
                点击 +1
            </button>
        </div>
    );
}

// 渲染到页面
const root = createRoot(document.getElementById("app"));
root.render(<Counter />);

console.log("React 应用已成功加载！");

代码编写要点：

• import 语句中的模块名必须与 Import Map 中定义的标识符完全一致
• 支持 import { named } from "module" 解构导入和 import * as ns from "module" 命名空间导入
• 支持动态导入 import("module") 进行懒加载
• console.log() 等输出会在下方的控制台面板中显示