本文为学习笔记，原文为张鑫旭大神的博客 原文地址

静态import

<script type="module">
  // 导入firstBlood模块
  import { pColor } from './firstBlood.mjs';
  // 设置颜色为红色
  pColor('red');
</script>

// export一个改变<p>元素颜色的方法
export function pColor (color) {
  const p = document.querySelector('p');
  p.style.color = color;
}

模块文件一般的后缀为mjs,与一般js文件区分开来，用js也可以，但是node.js中模块化特性只支持mjs。
在浏览器侧进行import模块引入，其对模块JS文件的mime type要求非常严格，务必和JS文件一致。这就导致，如果我们使用.mjs文件格式，则需要在服务器配置mime type类型，否则会报错.为application/javascript。

用nomodule实现向下兼容

对于不支持ES6的浏览器可以解决问题
但是还是会去请求mjs，但是不影响功能，只不过会多耗费流量。

<script type="module" src="module.mjs"></script>
<script nomodule src="fallback.js"></script>

一些静态的import的细节

1. 目前import不支持裸露的说明符
   import {foo} from 'bar.mjs'; import {foo} from 'utils/bar.mjs';不行

import {foo} from '/utils/bar.mjs';
import {foo} from './bar.mjs';
import {foo} from '../bar.mjs';//可以

2. 默认Defer行为
   module默认defer
   异步加载但是又保证顺序

<!-- 同步 -->
<script src="1.js"></script>
<!-- 异步但顺序保证 -->
<script defer src="2.js"></script>
<script defer src="3.js"></script>

3. 内联script同样defer特性
   内联script是没有defer的概念的，所以加了defer属性的内联script可以直接忽视defer属性
4. 支持async
   async为异步，与defer类似，但是不保证顺序，谁先加载完谁先执行。
5. 模块只会执行一次
   传统script引入多次就会调用多次
   模块引入多次只会调用一次
6. 总是CORS跨域
   不能直接跨域，需要在服务端配置Access-Control-Allow-Origin，可以指定具体域名，或者直接使用通配符，Access-Control-Allow-Origin:。
7. 无凭证
   这边不太理解
8. 天然严格模式
   import的JS模块代码天然严格模式，如果里面有不太友好的代码会报错，

动态import

语法为：
import(moduleSpecifier);
和静态import一样不能是裸露的地址。
import()返回一个promise