詳しくはES 6 export defaultとimport文の中の解約賦課値を説明します。

割り当て値
次のようなconfigオブジェクトがあります。

const config = {
 host: 'localhost',
 port: 80
}

その中のホスト属性を取得するには

let { host } = config

モジュールに分割
以上の二つのコードは同じファイルに入れると問題ないですが、一つのプロジェクトではconfigオブジェクトが多く使われます。今はconfigオブジェクトをconfig.jsファイルに入れます。

// config.js
export default {
 host: 'localhost',
 port: 80
}

ap.jsでimport config.js

// app.js
import config from './config'

let { host } = config
console.log(host) // => localhost
console.log(config.host) // => localhost

上のコードも大丈夫です。しかし、import文では、値を分解しますか？

// app.js
import { host } from './config'

console.log(host) // => undefined

問題の所在

import { host } from './config'

このコードは文法的には問題ないです。以前はantd-initで作成したプロジェクトで、プロジェクトの中で次のコードを使っても大丈夫です。奇妙なことに、私は後でvue-cliとcreate-react-apで作成したプロジェクトの中で下記のコードを使ってhostを正しく取得できませんでした。

// config.js
export default {
 host: 'localhost',
 port: 80
}

// app.js
import { host } from './config'
console.log(host) // => undefined

Babelのexport defaultに対する処理
Google検索's 6 importでの解決に失敗しました。次の文章を見つけました。ES 6のモジュール導入と変数の解決に関する注意事項です。webpackとbabelの変換を経ました。
ES 6における変数解は、次のようなものである。

const a = { b: 1 }
const { b } = a 

オブジェクトの同じ名前の属性を取得するために構造解除値を直接使用することができます。

const b = a.b 

変数のデスティネーションに加えて、ES 6のモジュール導入も同様の構文を提供する。

import { resolve } from 'path' 

webpackを使ってプロジェクトを構築するなら、ここの解構は普通変数の解構とは違います。例えば、a.jsには以下のコードがあります。

export default {

 b: 1

} 

このパッケージは、通常の変数の分解法則に従って導入されると、このような形になります。

import { b } from './a' 

は、エラーが発生します。変数bをエクスポートすることはできません。これは主にwebpackの構築と関係があるからです。モジュール導入時にwebpackで構築した後、以上の

import { b } from './a' 

似たようになる

a.default.b 

変数bはa.default上にありますが、a上にないので、undefinedに分解されます。適切に構成するには、モジュール内でエクスポートする必要があります。

export const b = 1 

このようにすれば、構築後のコードの中で、変数bはaにあり、a.defaultではなく、a.defaultにあり、正確に解決することができる。
だから

export default {
 host: 'localhost',
 port: 80
}

になりました

module.exports.default = {
 host: 'localhost',
 port: 80
}

したがって、ホストの値が取れないのは正常です。なぜantd-initで作られたプロジェクトが入手できますか？
解決
またGoogleはGitHub上の討論を検索しました。import文の「構賦値」は、解賦値ではなく、named importであり、構文的にも解構値と似ていますが、やはり以下の例のように違っています。

import { host as hostName } from './config' //          as

let obj = {
 a: {
 b: 'hello',
 }
}

let {a: {b}} = obj // import          
console.log(b) // => helllo

このような書き方は本来正しくないですが、babel 6の前にこのような書き方を許すことができます。babel 6の後ではできません。

// a.js
import { foo, bar } from "./b"
// b.js
export default {
 foo: "foo",
 bar: "bar"
}

やはりimport文の中にもう一つの行を追加します。

import b from './b'
let { foo, bar } = b

または

// a.js
import { foo, bar } from "./b"
// b.js
let foo = "foo"
let bar = "bar"
export { foo, bar }

または

// a.js
import { foo, bar } from "./b"
// b.js
export let foo = "foo"
export let bar = "bar"

ANtd-initはbabel-plugin-add-module-exportsを使っていますので、export defaultも大丈夫です。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。