跳到主要内容

类型

2023年05月30日
柏拉文
越努力，越幸运

一、module​

1.1 <script type="module" src="xx 依赖路径"></script>​

<script type="module" src="./a.js">
  b();
</script>

1.2 <script type="module"> import xx from 'xx 依赖路径' </script>​

<script type="module">
  import { b } from './b.js';
  b();
</script>

1.3 <script type="importmap"> { "imports": { "xx依赖名称": "xx依赖路径" } }</script> <script type="module"> import xx from 'xx 依赖名称' </script>​

<script type="importmap">
    {
      "imports": {
        "B": "./b.js"
      }
    }
</script>

<script type="module">
  import { b } from 'B';
  b();
</script>

二、importmap​

importmap 是Chrome 89才支持的。它是对import的一个映射处理，让你控制在js中使用import时，到底从哪个url获取这些库。

<script type="importmap">
    {
      "imports": {
        "B": "./b.js"
      }
    }
</script>

<script type="module">
  import { b } from 'B';
  b();
</script>

三、text/javascript​

四、application/json​

五、systemjs-importmap​

SystemJs 是一个通用的模块加载器，有属于自己的模块化规范。在浏览器中通过SystemJs来加载模块。SystemJS可兼容到IE11，但是它对于插件版本要求非常严格，而且变化非常大，兼容性也不是特别好，使用体验也不是很好，所以目前实践中用的非常少。它同样支持import映射，但是它的语法稍有不同:

<script type="systemjs-importmap">
{
  "imports": {
    "lodash": "https://unpkg.com/lodash@4.17.10/lodash.js"
  }
}
</script>

<script>
  async function load (moduleName){
      const module = await System.import(moduleName);
      return module;
  }

  load(lodash);
</script>