ESModule总结一、用法二、4大特点自动启用严格模式每个module形成私有作用域有跨域限制延迟加载，相当

<script type="module" src="./demo.js"></script>

导出语法

const a = 1
const b = 2
const c = 3

export {
  a,
  b as bb,
  c as default
}

另一种语法有时候更方便

export const a = 1
export const b = 2
const c = 3
export default c

导入语法

import {a, bb}, foo from './other.js'

console.log(a)
console.log(bb)
console.log(foo)

foo是c的别名，导入时可直接用别名导入默认导出。也可以用下面的写法：

import {a, bb, default as foo} from './other.js'

console.log(a)
console.log(bb)
console.log(foo)

只执行module，不导入变量

import {} from './other.js' // 完整写法
import './other.js'  // 简写

导入所有变量

import * as obj from './other.js'

动态导入, 返回promise

import('./other.js').then(module => {
    console.log(module)
})

透传

// index.js
import { Button } from './button.js'
import { Modal } from './modal.js'

export { Button, Modal }

透传简写

// index.js
export { Button } from './button.js'
export { Modal } from './modal.js'

export {a, b} // 只是esmodule的语法，并不是导出了一个对象

// 并不是结构
import {a, b} from './other.js

要导出一个对象，可以用export default

export default {a, b}

此时以下导入会报错, 因为导入不是解构：

import {a, b} from './other.js'   // error

正确的导入应该是

import obj from './other.js
const {a, b} = obj

模块内部可以更改值

export {a}
setTimeout(() => {a = 20}, 1000)

模块外部无法更改值

import {a} from './other.js'
a = 100 // error

导入裸模块、省略拓展名、省略/index.js在esmodule规范中是不被允许的, 例如：

import Vue from 'vue'

但在工作中，我们可以借助构建工具的能力来支持上述语法，以方便开发。

ESModule总结