[JavaScript知识库]js:在浏览器中使用原生的 ESM

通过script[type="module"]可直接在浏览器中使用原生 ESM

<script type="module">
        import arrayUniq from "https://cdn.jsdelivr.net/npm/array-uniq/index.js"

        console.log(arrayUniq([1, 2, 3, 2, 3]))
        // [1, 2, 3]
</script>

使用 script[type="importmap"] 统一配置导入路径

<script type="importmap">
    {
      "imports": {
        "array-uniq": "https://cdn.jsdelivr.net/npm/array-uniq/index.js"
      }
    }
</script>

<script type="module">
    import arrayUniq from "array-uniq"

    console.log(arrayUniq([1, 2, 3, 2, 3]))
    // [1, 2, 3]
</script>

使用 assert指定导入文件的类型

<script type="module">
    import data from "./data.json" assert { type: "json" };

    console.log(data)
    // {name: 'Tom', age: '25'}
</script>

data.json

{
    "name": "Tom",
    "age": "25"
}

参考
浏览器中如何使用原生的 ESM

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖