这是我参与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
导入使用
它一般是配合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指令,以上代码希望大家有时间都能敲一下,加深印象。
感谢你们的阅读。