One: Normal usage of export and import
1: export variable

// ./module/example.js

export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;

// index.js
import  {firstName, lastName, dob} from './module/example.js';

2: export method

// ./module/example.js
//When defining a method, you can export
export function sum(a, b) {
    return a + b;
}

function multiply(a, b) {
    return a * b;
}
//You can also define it first, then export it.
export { multiply };

In other files, import the above two methods is the same.

//./index.js
import  {sum, multiply} from './module/example.js';    

3: export renaming
Sometimes you may not want to use the original name of a variable, method, class, but want to change another name. Then you can use as
It can also be used in export and import, for example:

// ./module/example.js
function sum(a, b) {
    return a + b;
}
export {sum as add};

//./index.js
import  {add} from './module/example.js';

4: import renaming
In the third point, we see that variables can be renamed at export. The same effect can also be done when import ing, still using as:

// ./module/example.js
function sum(a, b) {
    return a + b;
}
export {sum};

//./index.js
import  {sum as add} from './module/example.js';

//The method that can be used in index.js at this point is add(), not sum().

5: export default
We can set a default value for a js module, which is default here. There are three ways to export a default as well as a variable we mentioned earlier:

1. export at Definition Time

      //./module/example.js
      export  default  function(a, b) {
          return a + b;
      }
      
      //./index.js
      import  sum  from './module/example.js';

Export can be an anonymous function. When importing, any reasonable name is used to represent the default export, but note that the difference between non-default variables is that there are no curly brackets ({}).

1. Definition before export

      //./module/example.js
      function sum(a, b) {
          return a + b;
      }
      export default sum;
      
      //./index.js
      import  sum  from './module/example.js';

When import ing, it can still be any reasonable variable name, not necessarily sum.

1. Using as

      //./module/example.js
      function sum(a, b) {
          return a + b;
      }
      export {sum as default}
   
      //./index.js
      import  sum  from './module/example.js';

When import ing, it can still be any reasonable variable name, not necessarily sum.

6: export default with other variables
A module can export default while export other variables, the grammar is the same as export only; only when import ing, default must be before non-default:

//./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;

function sum(a, b) {
    return a + b;
}
export {sum as default}

// ./index.js
//Grammatical correctness
import  sum, {firstName, lastName, dob}  from './module/example.js';

//Error: grammatical error
import  {firstName, lastName, dob}, sum  from './module/example.js';

7: import *
When we want to import all export items of a module at once, we can use import * as

// ./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;

function sum(a, b) {
    return a + b;
}
export {sum as default}

//./index.js
import  * as example  from './module/example.js';

console.log(example.firstName);
console.log(example.lastName);
console.log(example.dob);
example.default(1, 2);

Notice that example.default here is the default variable of our export.

8: export import
We can import variables from other modules as exports from this module. For example, / mian.js imports the variable firstName from. / idnex.js, which was originally imported from. / index.js. / module/example.js:

//./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;

function sum(a, b) {
    return a + b;
}
export {sum as default}

//./index.js
import {firstName}  from './module/example.js';
export {firstName};

//./main.js
import {firstName} from './index.js'

Two lines of code in the. / index.js file are equivalent to the following line:

export {firstName} from './module/example';

as can also be used at this time:

export {firstName as nickName} from './module/example';

It can also be used*

export * from './module/example';

When exporting *, default is not included. If we want to include default, we have to import and export default separately:

//./module/example.js
export var firstName = 'roger';
export const lastName = 'waters';
export let dob = 1944;

function sum(a, b) {
    return a + b;
}
export {sum as default}

//./index.js
export * from './module/example';
import sum from './module/example';
export {sum};

//./main.js
import {firstName, lastName, dob} from './index.js'
import {sum} from './index'

Two: Potential errors in export and import
1: You cannot export anonymous functions without default
2: export and default can only be used at the top level scope of module
3: The impact of module is global