export 对外暴露对象，import 从其他模块导入对象。

形式

// 单独导出：
export var name = 'foo module'
export function hello () {
    console.log('hello')
}
export class Person {}
// 末尾集中导出:
var name = 'foo module'
function hello () {
  console.log('hello')
}
class Person {}
export { name, hello, Person }
// 重命名:
var name = 'foo module'
export { name as fooName } 
// 或者 
export {  fooName: name }
// 导入用以上方式导出的模块
import { name, hello, Person } from './文件名.js'
// 默认导出
export {
  name as default
}
// 或者
export default name
//或者
export default {
  name, ...
}
// 使用第一种默认导出，导入时应该命名
import { default as fooName } from './文件名.js'
// 使用第二、三种默认导出，导入时应该是以导入变量的形式，去掉大括号
import  fooName from './文件名.js'

需要注意

export { name, hello, Person } 这种写法并非导出一个对象字面量，它是一种规定写法。 export default { name, hello, Person } 才是导出一个对象。
export 导出的是对象的引用关系，import 导入的也是这个引用关系，不是复制了一个一样的对象。当导出的对象在文件中发生变化，对象引用时也会发生变化。 ```javascript var name = ‘foo module’ export { name }

setTimeout(() => { name = “hello” }, 1000)

// 引用 import { name } from ‘./文件名.js’ console.log(name) // 输出 “foo module”

setTimeout(() => { console.log(name) // 输出 “hello” }, 1500)


3. import 导入的对象是一个常量，不能修改值。
3. import 的一些问题。
- 在没有打包工具的情况下，不能省略 .js 的扩展名。
```javascript
import { name } from './文件名' // 报错
import { name } from './文件名.js' // 正常
console.log(name)

在没有打包工具的情况下，导入一个有 index.js 的文件夹，不能省略 index.js。

import { lowercase } from './文件夹' // 报错
import { lowercase } from './文件夹/index.js' // 正常
console.log(lowercase('HHH'))

点斜杠 ‘./‘ 不能省略，如果省略 import 会认为是在导入第三方模块。也可以用全路径或者 url 加载。

import { name } from '文件名.js' // 报错
import { name } from './文件名.js' // 正常
import { name } from '/文件夹/文件名.js' // 正常
import { name } from 'http://localhost:3000/文件夹/文件名.js' // 正常
console.log(name)

只是需要执行模块而不需要成员的话。可以用以下两种方式，但这时不再能使用其成员。
```
import {} from './文件名.js'
import './文件名.js'
```
用 * 号导出所有成员，并用一个对象名接收。
```
import * as mod from './文件名.js'
console.log(mod)
```
用 import() 函数实现动态加载。 ```javascript // 错误 var modulePath = ‘./文件名.js’ import { name } from modulePath console.log(name)

// 错误 if (true) { import { name } from ‘./文件名.js’ }

// 正常 import(‘./文件名.js’).then(function (module) { console.log(module) })


- 一个模块，既有命名成员，又有默认成员。可以用过两种方式同时导入。
```javascript
// 导出
var name = 'jack'
var age = 18
export { name, age }
console.log('module action')
export default 'default export'
// 导入方式一
import { name, age, default as title } from './文件名.js'
// 导入方式二
import abc, { name, age } from './文件名.js'

直接导出导入的成员

一般在 index.js 中导入文件夹中的所有模块成员，并直接导出。直接导出无法访问模块成员。

export { default as Button } from './文件1.js'
export { Avatar } from './文件2.js'

part2 前端工程化

ES Module 导出、导入

形式

需要注意

直接导出导入的成员