Tutorial on Modular Management of Export and Import in javascript

Ideally, developers only need to implement the core business logic, and everything else can load modules that others have already written. However, before ES6, JavaScript1 did not have its own module system (module), so it was impossible to split a large program into interdependent small files and assemble them with simple methods. If you want to do modular development at the front end, you must rely on the third-party framework, such as requireJS and seaJS.

Modular Management of Export and Import in javascript

requireJS is the origin of AMD specification, and seaJS is the origin of CMD specification. Because their functions are highly overlapping, seaJS is no longer maintained and fades out of people's field of vision, so requireJS1 is dominant until ES6 appears, and it quickly becomes a common module solution for front-end and server-side, which can completely replace AMD specification and CommonJS specification supported by NodeJS.

The modular development specification ES Module is introduced in ES6 for the first time, which makes JavaScript support native modular development for the first time, and uses export and import keywords for modular development.

1 export: Used for externally outputting this module

Method 1 is exported directly when declared

export var str = '1';

export function func1() {
 return 'hello word'
} 

export const func2 = () => {
 //  Arrow function derivation 
 return 'hello word'
}

Method 2 and Series 1 are derived at the end

var str = '1';

function func1() {
 return 'hello word'
}

const func2 = () => {
 return 'hello word'
}

export {
 str,
 func1,
 func2,
}

Method 3 aliases

var str = '1';

function func1() {
 return 'hello word'
}

const func2 = () => {
 return 'hello word'
}

export {
 str as str1,
 func1 as f1,
 func2 as f2,
}

Method 4 directly exports the imported method

This method is often used in the export of unified 1 files

//  This is 1 A utils.js  Export 1 Two methods with two variables 
var str = '1';

function func1() {
 return 'hello word'
}

const func2 = () => {
 return 'hello word'
}

export {
 str as str1,
 func1 as f1,
 func2 as f2,
}
//  This is a reference utils.js File of -config.js
export {str,func1,func2} from  ' ./config.js'

Method 5 Default Export (default)

This export method can only have 1 default per js file, so it cannot be followed by a variable declaration statement.

export default function() {}

Method 6 Exporting Classes

//  This is 1 A utils.js  Export 1 Two methods with two variables 
export class utils {

 format(){
  //  Class method 1
 };
 cheackData(){
  //  Class method 2
 }
}
//  Call utils In a file 
import {utils} from  ' ./utils.js'

const utils = new utils();
utils.format();
utils.cheackData();

2 import: Used to load the module with export interface in the module

Method 1 Direct derivation

import {str,func1,func2} from  ' ./utils.js'

Method 2 aliases

In this case, the same import content exists in two or more modules used for import

import {str as str1,func1 as f1,func2 as f2} from  ' ./utils.js'

Method 3 Imports all of the files at one time

import * as utils from  ' ./utils.js'

utils.str
utils.func1
utils.func2

Method 4 Import modules exported using default

import utils from  ' ./utils.js'