前端(模块化)

未使用模块化

定义两个js文件simple1.js和simple2.js

let a1=1;

let a1=1;

两个js文件变量重名

在html测试

传统引入js文件

<script src="./simple1.js"></script>
<script src="./simple2.js"></script>

浏览器报错

使用模块化后

暴露js文件

暴露MyEx.js

export let arr={name:"李四",age:2};
export function f1(){console.log("MyEx的f1函数");console.log(arr)
}

暴露MyExport.js

 let arr={name:"李四",age:2};function f1(){console.log("MyExport的f1函数");console.log(arr)
}
export{arr,f1};

测试暴露值

<!-- 模块化 -->
<script type="module">import * as me from "./MyEx.js";import {arr,f1}from "./MyExport.js"me.f1();console.log(me.arr);
​f1();console.log(arr);
</script>