ES6 模块语法导出默认

Question

I generally see this syntax in many places in my React app (mostly in index.js). So all that the file has is just this statement;

export {default} from './MyComponent';
export {default as STUB_DATA} from './MyStubDataFile';

What is the significance of using this syntax?

Answer 1

The export statement is used when creating modules to export functions, objects, primitive values from the module, so they can be used by other programs with the import statement

// moduleName.js
export function fun1() { ... }

// UseModule.js
import { fun1 } from './moduleName';

In react term, we can use stateless components in other components by exporting the components from their respective modules, and using it in other files.

export default:

one default export per file. When we import we have to specify a name and export like:

const MyComponent = () => {}
export default MyComponent;

and import like:

import MyDefaultComponent from "./MyDefaultExport";

Answer 2

Let say you have a folder called, core .

In Core directory let's say you have below folder structure.

core
  - core.js
  - validators.js
  - hooks.js

Now let say you are going to use these in your main application.

So in your, app.js you can do some thing like below,

import MyLibCore from './core/core.js';
import Validators from './core/validtors.js';

// pseudocode

// Using main method from our core library
function bootstrap() {
  const isMobile = validate();
  
  if(isMobile) {
    MyLibCore({ mobile : true });
  } else {
    MyLibCore();
  }
  
}

// using a method exposed by our core library
function validate() {
  const isMobile = Validators.isMobile();
  return isMobile;
}

Now notice the import statements of the above code. Now if we share our library CORE with another developer, he may don't know the exact folder structure of our CORE libarary/directory. So to make our library is more friendly for reuse, what we can do is, create a index.js file inside our library directory.

So now our directory structure will looks like,

core
  - core.js
  - validators.js
  - hooks.js
  - index.js

Now inside the index.js file, we expose the list of methods/ variables/ functions to the outside.

To do that, inside the index.js file.

// Expose default exports from the sub files.
export { default } from './core.js';
export { default as Validators } from './validators.js';
export { default as Hooks } from './Hooks';

// Expose any named exports
export { testRun } from './core.js' 

Now whenever we or any other developer use this core directory on the code,

app.js

//import MyLibCore from './core/core.js';
//import Validators from './core/validtors.js';

import MyLibCore, { Validators } from './core';

Notice that, by doing this,

1. The user of the core directory does not need to have knowledge about internal folder structure.
2. It is enough to type from './core . No need to type 'index.js'
3. Now you can document the exported things in the index.js file to make it easy to understand.

Here's an practical example in React. Check the index.js file. https://github.com/mui-org/material-ui/tree/next/packages/material-ui/src/Accordion

Then check here how it used. https://material-ui.com/components/accordion/