require ( './ expample.js) .default Detailed

Total recently encountered similar

var a = require('./expample.js).default

 

This code, I feel very wonderful, summed wave.

Why is this problem?

import Is statically compiled, and  require can be dynamically loaded, which means you can choose when to pass judgment conditions  require , and  import are not, so sometimes we face the need to require import the module to a es6 (such as react-hot-loader official demo : P)

Of course, this is just one scene.

Pre-knowledge

1. ES6 Module common syntax. Such as exportexport module interface |  import Pour module |  export defaultsyntactic sugar
2. Node.js modules commonly used. For example module.exports | require
3. ES6 difference module commonjs module (statically compiled with dynamic loading | quotable copy and values)

If you do not understand some of the front of your knowledge, I suggest what I read two chapters of his book "ECMAScript 6 Getting Started" Ruan Yifeng teacher:

1. Module syntax
2. Module loading implement

If you already have these knowledge, let's talk about

1. export defaultWhy is syntactic sugar
2. require a ES6 Module

export defaultWhy is syntactic sugar

defaultKeywords plainly, it is an alias (as) syntactic sugar

The following code should be very common:

Export Interface

// a.js
function a(){}
export {a}

 

Import module

// b.js
import {a} from './a'

 

Braces syntax is the deconstruction of the assignment, we can be understood as exportthe export of an object, this object will have a function like this

{
  a:function(){}
}

 

Then there is the structure behind the assignment taken by a, so that the variable name must be the same.

ECMAScript 6 Getting Started: As can be seen from the previous example, using the import command when the user needs to know the name of the variable or function name to be loaded, or can not be loaded. However, we certainly want to get started quickly, may not be willing to read documentation to understand what properties and methods module.
In order to provide convenience to users, so that they do not read the documentation can load modules, it is necessary to use export default command to specify the default output for the module.

defaultThis can be understood as syntactic sugar grammar

Export Interface

// d.js
export default function() {}

// Equivalent to:
function a() {};
export {a as default};

 

Import module

import a from './d';

// equivalent to, or that such an approach is the following shorthand, it is the same thing
import {default as a} from './d';

 

This benefit is syntactic sugar import when omit the curly braces {}.

Simply put, if the import, you find that a variable is not enclosed in braces (no asterisk), then you should put it reduced to as syntax braces in mind.

Essentially it is still a structure assignment, but we wrote it easier to pretend that nothing braces disappeared.

How to require a ES6 Module

Have a good answer for this article topic on stackoverflow, reads as follows:

Finally, the require and require.default... when dealing with ES6 imports (export default MyComponent), the exported module is of the format {"default" : MyComponent}. The import statement correctly handles this assignment for you, however, you have to do the require("./mycomponent").default conversion yourself. The HMR interface code cannot use import as it doesn't work inline. If you want to avoid that, use module.exports instead of export default.

I'll Translation Original :

Finally, require require.default ... and when the node processing module ES6 (export default mycomponent) import, export module format

{
  "default": mycomponent
}

importStatement correctly dealt with the problem for you, but you must perform its own HMR (hot update module) is not. Case mode operation, interface code can not be used if you want to avoid using instead ;require("./mycomponent").defaultinlineimportmodule.exportsexport default

Been mentioned above, export the keyword is exporting an object, the object memory in a property (we want exposure), export default is  export syntactic sugar, import a export default exposed module contains step deconstruction of the assignment, so in the node requireto request a export defaultthe module requires us .to remove the object property syntax (because wood has deconstructed require assignment), clear.

Put another way, if  require the commonjs module specifications, namely:
Export:

// a.js
module.exports = {
  a:'helloworld'
}

 

Import:

// b.js
var m = require('./a.js');
console.log(m.a); // helloworld

 

This is very clear, we  module.exports are what, require is what.

But export default package with a layer of syntactic sugar, let us see less clear:

const a = 'helloworld';
export default a;

In fact, it is exported

{
  "default": a
}

 

Rather than  a variable, which is why I want to emphasize before syntactic sugar, if you will  export default revert to:

const a = 'helloworld';
export {a as default}

 

It is not able to understand a little of it.

Our question will be solved.

Note: All of the above code is run webpack development environment (Babel) in (ES6 guaranteed grammar module may be recognized).

Reference: the Node are not understood and require import, you'll be miserable pit