export {default as} from 【深入解读】

时间：2025-01-15 22:42:33

前情引入

今天无意间发现了这种写法

export {default as Home} from './'
export {default as Side} from './'
export {default as Nav} from './'

然后我就感觉很奇怪，JS中还支持这种语法嘛？先导入然后再导出的写法？
于是我就仔细研究了起来

拆分代码

既然这种写法是集导入导出为一体的，那么它应该可以拆分成两行代码去写

拆分前

export {default as b} from './'

拆分后

import {default as b} from './'
export b

这里你可能感觉很奇怪，怎么import还能defalut了？这里我需要花费一些文字帮你解读一下

众所周知：如果我们是export default的话，我们import的时候无需写{}，直接进行导入就可以了，但是其实我们有多种导入选择。

export导出

// 
var str='我爱前端'
export default str

import导入（1）

import str from './'

import导入（2）

import {default as str} from './index.js

其实，下面这种写法才是常规写法。上面直接导入的这种，只是简写而已

好了，现在你再次看我们的export from用法

export … from写法：

export {default as b} from './'

等价于：先import，再export

import {default as b} from './'
export b

是不是你就明白了它的含义呢？

举一反三

好了，它可以写export {defalut as xxx} from。那我们学会这个原理后，我们甚至可以写出下面这几个写法

export+import（先导入后导出）

// 
// => import {table as Etable} from './'（1）
// => export Etable（2）
export { table as Etable } from './'//（1）+（2）= (3)

import （导入上面的module）

import {Etable} from './'


// 
export var table='我的表格'

读到这里你可能会问，先导入后导出这种写法，感觉没啥用呀。导入的东西没经过处理，马上就导出了。

这里我说明一下它的意思，就是把你写的多个模块，进行批量导出的，在组件库中，它有个专业的说法叫做，统一导出资源

好了今天就分享这么多了，我还要学习更多的知识。朋友们我们下期再见

相关文章