模块暴露的三种方式

1. 分别暴露(m1.js)

   export let roozen = 'roozen.xyz'
   
   export function open(){
       console.log(`m1打开了${roozen}`)
   }
   

2. 统一暴露(m2.js)

   let roozen = 'www.roozen.xyz'
   
   function open(){
       console.log(`m2打开了${roozen}`)
   }
   
   export {roozen,open}
   

3. 默认暴露(m3.js)

   export default {
       website:'roozen.xyz',
       open:function (){
           console.log(`m3打开了${this.website}`);
       }
   }
   

模块引入的方式

1. 在html文件中(index.html)

   <!-- 使用import导入其他模块要加type属性 -->
   <script type="module">
       import * as m from './m1.js'
       m.open();
   </script>
   

2. 在js文件中(app.js)

   //通用导入
   import * as m1 from './m1.js'
   console.log(m1.roozen);
   m1.open;
   
   //解构形式导入
   import { roozen as otherName,open as otherFunctionName} from './m2.js';
   console.log(otherName)
   otherFunctionName();
   //default的解构导入必须有别名
   import {default as bieMing} from './m3.js'
   console.log(bieMing.website)
   bieMing.open();
   
   //简便导入（只针对默认暴露的模块）
   import m3 from './m3.js'
   console.log(m3.website)
   m3.open();
   

   然后再在html中导入app.js

   <!-- 引入入口js模块 -->
   <script src="./app.js" type="module"></script>
   

注：

Es6模块化开发出现报错 Access to script at 'file:xxx' from origin 'null' has been blocked by CORS policy origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.

解决方法： VScode中安装Live Server 插件

选择Open with Live Server