Three external exposure methods and introduction methods of export in ES6

 In the JS era a few years ago, there was no concept of modularity. However, as front-end projects become larger and more complex, it is urgent to introduce the concept of modularity. Before ES6, the community developed some modular solutions, such as: CommonJS and AMD and CMD. These are slowly being replaced by import and export after ES6. Export is used to specify the interface that the module opens to the outside world. Regardless of whether you define it or not, the module exported by export is in strict mode and cannot be used in embedded scripts. The import command is used to import functionality provided by other modules.

Three ways of exporting external exposure

• expose modules separately

export const name="aaa";

export function say(){

    console.log("hello");

}

• Unified exposure module

const name="aaa";

function say(){

    console.log("hello");

}

export {name,say}

• Exposed modules by default

export default{

    name:"aaa",

    say:function(){

        console.log("hello-name");

    }

}

module import method

• direct import

import * as m1 from "./helloone.js

m1.say();

• destructuring assignment

      import {say,name} from "./hello2.js";

      console.log(name)

• exposed by default

    //import m from "./hello3.js";//Shorthand, suitable for default module exposure

      import {default as m} from "./hello3.js";

      console.log(m.name)

      m.say()

• total import

   <script src="./main.js" type="module"></script>