ES6模块化的导入与导出

html部分

例：

<script src="./export.js" type="module"></script>//导出的模块
<script src="./import.js" type="module"></script>//导入的模块

导出导入部分

方式一

导出：

function sum(a,b){
    return a+b
}
//这个方法可以在{}内放入需要向外暴露的内容，变量，函数，类等等都可以
 export{
     sum
 }

导入：

 import{
     sum
 } from "./export.js"//此处的后缀省略会报错！
 console.log(sum(1,2));

方式二

导出：

export let name="aaa"
//这个方法就比较直接了，本质上和方法一没区别

导入：

 import{name} from "./export.js"
 console.log(name); 

方式三

导出：

export function fn(){
    console.log("fn");
}
//可以用这样的方式导出函数或者类

导入：

import{fn} from "./export.js"
fn()

使用default方法

导出：

let name="bob"
export default name
//一个模块中只能有一个default，用于在导入模块中自定义该元素的名称

导入：

import bbb from "./export.js"//bbb为自定义名称，不需要加上{}
 console.log(bbb);

统一全部导入

导出：省略
导入：

import * as aaa from "./export.js"//aaa为自定义的对象名
console.log(aaa.sum(1,2));