[F2016061803] Considerations for module Introduction and variable deconstruction of ES6

In ES6, the variable deconstruction is this:

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

We can use the destructor assignment directly to get the property of the object with the same name, which is equivalent to:

Const B = a.b

In addition to the destructor assignment of variables, ES6 's module import also provides similar syntax:

Import {Resolve} from ' path '

If you use Webpack to build a project, be aware that the deconstruction here is different from the normal variable, such as the following code in A.js:

Export default {    b:1}

If the package is imported according to the destructor of the normal variable, this is the form:

Import {B} from './a '

It is possible that an error occurs and the variable B cannot be exported.

Mainly because this is related to the construction of Webpack. When using module import, when built with Webpack, the above

Import {B} from './a '

into a similar

_a.default.b

You can see that the variable B is on the _a.default, not on the _a, so the deconstruction is undefined. If you want to deconstruct correctly, you must export within the module, namely:

Export Const B = 1

In this case, in the constructed code, the variable B is on the _a, not on the _a.default, so that it can be properly deconstructed.

This is also the use of webpack need to pay attention to the problem, otherwise the runtime will find that clearly is the correct syntax, why export is undefined it? Remember: When using

Import {B} from './a '

A similar syntax, variable B needs to be actively exported.

[F2016061803] Considerations for module Introduction and variable deconstruction of ES6