export 与export default

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>
    <script src="export-1.js" type="module"></script>
</body>

export {a as default} from './export-3.js';

//export-1.js
import a from './export-2.js'
console.log(a)

//export-2.js
export {a as default} from './export-3.js';
//等同于
export {a} from './export-3.js';
export default a

//export-3.js
let a = 2
export {a}

export {default as b} from './export-3.js';

//export-1.js
import {b} from './export-2.js'
console.log(b)

//export-2.js
export {default as b} from './export-3.js';

//export-3.js
let a = 2
export default a

import b from './export-3.js'

//export-1.js
import b from './export-2.js'
console.log(b)

//export-2.js
import b from './export-3.js'
export default b

//export-3.js
let a = 2
export default a

//export-1.js
import cc from './export-2.js'
let {b}=cc
console.log(b)

//export-2.js
import b from './export-3.js'
const cc = {b}
export default cc

//export-3.js
let a = 2
export default a

import上的{} 是去取export的值；没有{}则是取export default；不能理解成简单的对象解构

ES6 export && export default 差异总结

export default 在一个模块里只能有一个，但是export可以有多个
模块中通过export 导出的(属性或者方法)可以修改，但是通过export default导出的不可以修改
如果想修改默认导出的值，可以使用export {e1 as default}这种方法。

ECMAScript 6 入门--Module 的语法

export 与 import 的复合写法

export 与export default

推荐阅读更多精彩内容