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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

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

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

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

data.json

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

  

 

  
1
  
2
  
3
  
4
 

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

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/124604149