阅读 265

es6的export和export default指令

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

前言

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

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

以下代码属于es6语法,如果需要node识别该文件是es6模块,需要你把文件命名为xxx.mjs

如果你的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导入使用

它一般是配合exportexport default一起使用。 如果是使用exportimport 需要使用{}, 如果是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指令,以上代码希望大家有时间都能敲一下,加深印象。

感谢你们的阅读。

文章分类
前端