Deconstruction assignment
There are the following config objects
const config = {
host: 'localhost',
port: 80
}
To get the host property in it
let { host } = config
Split into modules
There will be no problem with putting the above two pieces of code in the same file, but in a project, the config object will be used in many places. Now put the config object in the file.
//
export default {
host: 'localhost',
port: 80
}
In import
//
import config from './config'
let { host } = config
(host) // => localhost
() // => localhost
There will be no problem with the above code. But what about deconstructing assignments in the import statement?
//
import { host } from './config'
(host) // => undefined
The problem lies
import { host } from './config'
There is no problem with this code syntax.antd-init It is fine to use the following code in the project created. Strangely, I cannot get the host correctly in the project I created with vue-cli and create-react-app later.
//
export default {
host: 'localhost',
port: 80
}
//
import { host } from './config'
(host) // => undefined
babel's handling of export default
I searched for 'es6 import deconstruction failed' using Google and found the following article: Notes on module import and variable deconstruction of ES6. It turns out that the conversion from webpack and babel
In ES6, variable deconstruction is like this:
const a = { b: 1 }
const { b } = a
We can directly use deconstruction assignment to obtain the object's attribute of the same name, which is equivalent to:
const b =
In addition to deconstructing and assignment of variables, ES6's module import also provides a similar syntax:
import { resolve } from 'path'
If you use webpack to build a project, please note that the deconstruction here is different from the deconstruction of ordinary variables, for example, there is the following code in it:
export default {
b: 1
}
If you import this package according to the deconstruction rule of ordinary variables, that is, this form:
import { b } from './a'
An error will occur and the variable b cannot be exported. This is mainly because it is related to the construction of webpack. When using module import, after building with webpack, the above
import { b } from './a'
Become a similar
You can see that the variable b is on it, not on a, so it is undefined. If you want to deconstruct correctly, you must export within the module, i.e.:
export const b = 1
In this way, in the constructed code, the variable b is on a, not on it, so that it can be correctly deconstructed.
so
export default {
host: 'localhost',
port: 80
}
Become
= {
host: 'localhost',
port: 80
}
Therefore, it is normal not to get the value of host. Then why can antd-init be obtained?
solve
Google again, I found itDiscussion on GitHub. "Deconstruction assignment" in the import statement is not a deconstruction assignment, but named imports. It is syntactically similar to deconstruction assignment, but there is still a difference, such as the following example.
import { host as hostName } from './config' // Cannot be used in deconstruction assignment
let obj = {
a: {
b: 'hello',
}
}
let {a: {b}} = obj // This is not allowed in the import statement(b) // => helllo
This writing method is originally incorrect, but this writing method can be allowed before babel 6, but it cannot be done after babel 6.
//
import { foo, bar } from "./b"
//
export default {
foo: "foo",
bar: "bar"
}
So add one more line to the import statement
import b from './b'
let { foo, bar } = b
or
//
import { foo, bar } from "./b"
//
let foo = "foo"
let bar = "bar"
export { foo, bar }
or
//
import { foo, bar } from "./b"
//
export let foo = "foo"
export let bar = "bar"
And antd-init usesbabel-plugin-add-module-exports, so export default is no problem.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.