Usage of export and import of ES6

foreword

In the process of project development, some shared data, methods, classes, etc. can be encapsulated into modules for output. We load the modules where needed, saving a lot of repetitive code.
How to modularize development uses ES6 knowledge: export and import.

export

absolute output

That is, there must be a variable name or method name in order to output.

export function test () {} //correct
export function () {} // wrong

You can export directly before variables and methods

export var test = "123"
export var test = function () {} 
export var test = function test1 () {} //output test variable
export function test () {}

Export output variables at any location

The output variable name or method name must be enclosed in brackets {}

var test = "123"
export {test}
var test1 = function () {} 
export {test1}

rules of use

Export can be used multiple times in a file and export can also output multiple variables at a time

var test = "123"
export {test}
var test1 = function () {} 
export {test1}
export {test,test1}

export default

default output

Just don't make absolutes, I default to output a variable or method (anonymous method can also), you can use any variable name to refer to when you refer.
In essence, export default is to output a variable or method defined as default, so it cannot be followed by a variable declaration statement

export default function () {} // also correct
export default var test = function () {} // wrong

You can export default directly before variables and methods

export default function () {} 
export default function test () {} 

export default output variable at any location

There is no need to add {} to the output variable name or method name

var test = "123"
export default test
///////
var test1 = function () {} 
export default test1

rules of use

Export default can only be used once in a file and export default can only output one variable at a time

import

After using the export command to define the external interface of the module, other JS files can load the module through the import command.

Load the exported module

The variable name and function name of the loaded module must be the same as the variable name output by export and need to be enclosed in brackets {}

//index.js file
var test = function () {}
export {test}
// test.js file in the same folder
import {test} from './index.js' //correct
import test from './index.js' // wrong
import {test1} from './index.js' // wrong

Load modules exported by export default

The variable name and function name of the loaded module can be arbitrary and do not require parentheses {}

//index.js file
var test = function () {}
export default test
// test.js file in the same folder
import test from './index.js' //correct
import test1 from './index.js' //correct

import()

Using the import() function, dynamic loading can be achieved.

import('./index.js')
.then((res) => {
  // ...
});

• import() returns a Promise object. After import() loads the module successfully, the module will be used as an object as the parameter of the then method.
• import() is asynchronous loading.
• import() is typically used for on-demand, conditional, and dynamic module paths.