1.浏览器加载

说明：浏览器脚本的默认语言时JS，因此type="application/javascript"。因此可以省略的，渲染引擎遇到<script>标签就会停下来，等到执行完脚本，再继续向下渲染。

1.1加载规则

说明：浏览器加载ES6模块，也是用script标签，但是要加入type="module"属性，这是异步加载，不会造成堵塞浏览器，等到整个页面渲染完，再执行模块脚本，等同于使用了defer属性。defer是“渲染完再执行”，async是“下载完就执行”。

<script src="url" defer></script>
<script src="url" async></script> 
<!-- defer是渲染完再执行，async是下载完就执行 -->

2. ES6模块于CommonJS模块的差异

CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用。
CommonJS模块是运行时加载，ES6模块是编译时输出接口。
CommonJS模块的require()是同步加载模块，ES6模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。

3.Node.js的模块加载方法

说明：

js有两种模块，一种是ES6模块，简称ESM;另一种是CommonJS模块，简称CJS。

CommonJS模块是Node.js专用的，与ES6模块不兼容。语法上面CommonJS模块使用require()和module.exports,ES6模块使用import和export。

但是Node.js已经默认打开了ES6模块支持。Node.js要求ES6模块采用.mjs后缀文件名。也就是说，只要脚本文件里面使用import或者export。如果不希望将后缀名改成.mjs，可以在项目的package.json文件中，指定type字段为module。.mjs文件总是以 ES6 模块加载，.cjs文件总是以 CommonJS 模块加载，.js文件的加载取决于package.json里面type字段的设置。

4.package.json和main字段

说明： package.json文件有两个字段可以指定模块的入口文件；main和exports。比较简单的模块，可以只使用main,指定模块加载的入口文件。

  {   
    
        "main":"url"
    }

5.package.json的exports字段

说明：exports字段的优先级高于main字段。它有多种用法。可以指定脚本或子目录的别名。

 {
        "exports":{
            "./src":"./src"
            // 第一个是新名字,第二个是旧名字
        }
    }

6.main的别名

说明： exports字段的别名如果是.,就代表模块的主入口，优先级高于main字段，并且可以直接写成exports字段的值。

 {
        "exports":{
            ".":"./src"
        }
    }
//相等
      {
        "exports":"./url"
      }

7.条件加载

说明：利用.别名，可以为ES6模块和CommonJS指定不同的入口。

{
  "type": "module",
  "exports": {
    ".": {
      "require": "./main.cjs",
      "default": "./main.js"
    }
  }
}

8.ES6模块加载CommonJS模块

说明：ES6模块的import命令可以加载CommonJS模块，只能整体加载。

9.支持两种格式的模块

"exports"：{
  "require": "./url"，
  "import": "./url"
}

10.CommonJS模块的加载原理

说明：CommonJS 的一个模块，就是一个脚本文件。require命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。CommonJS 模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。

ES6中Module的加载实现