左小白的技术日常
Github

import { } 解构与 export 和 export default.md

这篇文章发布于 2021/04/03,归类于
标签:
import {} 与 export defaultimport {}

在封装功能函数时,我们经常需要在 import 时使用解构 {} 来仅导出部分模块功能。在有些情况会发现是无法解构的,下面来看看

// ./modlues/common/index
export default {
  en: {
    msg: 'hello',
  },
  cn: {
    msg: '你好',
  },
}

// index.js
import { en, cn } from './modlues/common/index'
console.log(en, cn)

export-warn.png

这里是无法解构的,提示警告,需要写成这样

import common from './modlues/common/index'
let { en, cn } = common
console.log(en, cn)

如果是需要在 import 时就能解构,需要使用下面的写法

// ./modlues/common/index
export const en = {
  msg: 'hello',
}

export const cn = {
  msg: '你好',
}

或者

const en = {
  msg: 'hello',
}
const cn = {
  msg: '你好',
}
export { en, cn }

参考: 详解ES6 export default 和 import语句中的解构赋值