ES6模块化1.js模块化的出现ES5以及它之前的js是没有模块化的，如果要进行模块化操作，需要引入第三方的类库。随着技

1.js模块化的出现

ES5以及它之前的js是没有模块化的，如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂，终于在ES6中引入了模块化的操作。

2.es6模块化基本用法

es6中，一个模块就是一个js文件，所以我们新建一个模块（js文件）
在这里插入图片描述
es6模块化中模块与外部的数据传输是依赖于export（发送）和import（接收）这两个关键字的，下面通过一个例子来理解它们的用法
在module1.js中：

export let name = 'aays';//发送name这个变量

创建一个外部文件index.html,并且码入：

<script type="module">
        import {name} from './module1.js'//接收name这个变量
        console.log(name)//aays
    </script>

如果报错且内容如下：（Access to script at ‘file:///C:/Users/27907/Desktop/xm/chatrobot/module1.js’），那么就是发生了跨域的错误，es6模块化是不能跨域使用的，不能在本地打开文件，你可以在搭建一个本地服务器来打开这个文件，具体参见

https://blog.csdn.net/qq_44163269/article/details/105116173

上面是最基本的用法，如果要输出多个变量可以将这些变量包装成对象进行模块化输出：

//模块
let name = 'aays'，age = 18
const sex = '男'
export {
    name,
    age,
    sex
}
//外部
    <script type="module">
        import {name,age,sex} from './module1.js'
         console.log(age)//18
    </script>

如果你想给传输过来的变量重新命名（可用于防止暴露模块当中的变量名字或者简化变量名），可以通过as来进行操作，上述代码修改为:

//模块
let name = 'aays'，age = 18
const sex = '男'
export {
    name as myname,
    age as myage,
    sex as mysex
}
//外部
    <script type="module">
        import {myname,myage,mysex} from './module1.js'
         console.log(myage)//18
    </script>

如果你不想将export过来的一一解构赋值，那么你可以使用*符号来直接获取整个模块，上述代码修改为

//模块
let name = 'aays'，age = 18
const sex = '男'
export {
    name,
    age,
    sex
}
//外部
    <script type="module">
        import * as allmodule from './module1.js'
         console.log(`${allmodule.name}今年${allmodule.age}岁
         性别${allmodule.sex}`)//aays今年18岁 性别男
    </script>

3.默认导出与混合导出

一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致。

//模块
export default function(){
    return "默认导出一个方法"
}
//外部
import fn from './module1.js'//fn可以是任意变量名
console.log(fn())//输出“默认导出一个方法”
//我们可以将要导出的东西都放在默认导出中，
//然后取出来作为一个对象直接取里面的东西来用，比较方便

混合导出即同时在一个export中导出默认数据与非默认数据，加个逗号就能实现

//模块
export default function(){
    return "默认导出一个方法"
}
export let name ="aays";
//外部
import fn,{name} from "./module1.js";
console.log(fn()+name);//默认导出一个方法aays

4.重命名export和import

如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做：

export let myName="我来自module1.js";//模块1中
export let myName="我来自module2.js";//模块2中
//外部
import {myName as name1} from "./module1.js";
import {myName as name2} from "./module2.js";
console.log(name1);//我来自module1.js
console.log(name2);//我来自module2.js