es6的export和export default指令

这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战

前言

上一篇文章说了CommonJS规范的exports与module.exports的异同， 今天来讲讲es6新增的export和export default指令。

在一个模块内，内部声明的变量，函数，类等是无法在另外一个模块内访问到，如果需要访问，需要先通过es6提供的指令export,export default先导出， 然后再使用import导入使用。

如果你的node版本是低于v13.2.0，运行命令需要加上--experimental-modules， 否则会报错Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

node --experimental-modules  xxx.mjs

export

export，导出给外部的接口,可以是变量，函数，类等等。

使用如下：

// a.mjs
export var name = '答案cp3'
export function fn () {
  console.log(this)
}
export class A {
}

// 导入的时候
import {name, fn, A} from './a.mjs'

但是导出的时候不能单单就是把一个值导出，这样会报错

var  name = '答案cp3'
export name // 报错

function fn () {
  console.log(this)
}
export fn // 报错

可以换种写法，通过{}把导出给外部的接口和内部的变量关联起来。

var name = '答案cp3'
export { name } 

function fn () {
  console.log(this)
}
export {fn} 

export 还可以使用as重命名

// a.mjs
var name = '答案cp3'
export { name as newName } // 重命名为newName

// 导入的时候
import { newName } from './a.mjs'

export default

export default指令，默认导出，在导入模块的时候无需写{}, 可以取任何名字，这个名字代表的是默认导出。

使用如下：

// a.mjs
var name = '答案cp3'
export default name

// 导入的时候 anyName可以是任何名字
import anyName from './a.mjs'

上面这个例子，你可以会好奇，为啥 export default可以导出一个变量值？

这是因为export default本质上是导出一个属性为default的变量，你可以给这个属性赋值，变量值，函数名都可以。

但是跟export那种不一样,它可以把一个值导出

export default var name = '答案cp3' // 报错

function fn () {
  console.log(this)
}
export default fn // 正确

var name = '答案cp3'
export default name
// 等同于
export {name as default}

// 导入的时候 
import name from './a.mjs'

// 等同于
import {default as name} from './a.mjs'

另外， export default一个模块只能使用一次，相当于default是一个常量，不能重复赋值。

import

上面提过，模块是export,export default先导出， 然后再使用import导入使用

它一般是配合export，export default一起使用。 如果是使用export，import 需要使用{}, 如果是export default, 则无需写{}

// a.mjs
export var name = '答案cp3'
var age = 18
export default age

// 导入
import age, {name} from './a.mjs'

然后 import也可以使用as重命名，以上面代码为例

import age, { name as name1 } from './a.mjs'

age那个就不能重命名了，因为你想取别的名都可以取

name重命名之后name就不能用了

import导入都变量都是常量，一般都不能改（也不建议改）

import age, { name as name1 } from './a.mjs'

age = 17 // 报错

我们还可以使用*来代表整个导出对象, 它一般是配合as重命名一起使用

以上面例子继续：

import * as info from './a.mjs'
console.log(info) // { default: 18, name: '答案cp3' }

总结

以上就是我总结的关于es6的export和export default指令，以上代码希望大家有时间都能敲一下，加深印象。

感谢你们的阅读。