import别名

当import调用时同时导入两个相同的变量名:
aaa.js:

export var name="冒险岛";

bbb.js:

export var name="maple story";

demo.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script type="module">
    import {name} from "./js/aaa.js"
    import {name} from "./js/bbb.js"
    console.log(name);
</script>
</head>
<body>
    123
</body>
</html>

9、10两行导入aaa.js和bbb.js中的name变量
第11行打印name变量

测试页面:

直接提示导入的变量重复，报错。

所以为了解决导入变量名重名的问题，可以对变量名起别名。

demo.html中如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script type="module">
    import {name} from "./js/aaa.js"
    import {name as Bname} from "./js/bbb.js"
    console.log(name);
    console.log(Bname);
</script>
</head>
<body>
    123
</body>
</html>

第10行对bbb.js中的name变量使用as 起别名

测试页面:

成功打印出导入的两个name变量。

总结

当导入有重名时，除了import时使用as起别名，调用别名即可
也可以在export时使用as起别名。

export default默认导出

export default将所要导出的变量和方法都封装在一个对象中，外部调用这个对象，即可使用其中的属性和方法
使用export default可以避免多次在文件中对多个变量或者属性export,减少重复书写
当调用时使用import "自定义名称" from "js文件路径"

例如aaa.js:

var name="冒险岛"
var fun=function(){
    return "这是一个方法"
}

export default{ //将需要导出的内容都封装在一个对象中，方便其他文件导入和调用
    name,
    fun 
}

demo.html导入aaa.js中的对象:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script type="module">
    import a_import from "./js/aaa.js";
    console.log(a_import.name);
    console.log(a_import.fun());
</script>
</head>
<body>
    123
</body>
</html>