ES6 modularization

ES6 modularization brief introduction

ES6 Modular specification yes Browser side And Server side   General modular development specification . Its appearance greatly reduces the modular learning cost of front-end developers , Developers don't need to learn any more AMD(AMD yes !!!  XD)、CMD or CommonJS Isomodular specification .

ES6 It is defined in the modular specification ：

• Every js File is a separate module
• Import other module members to use import keyword
• Shared module members use export keyword

stay node.js Experience ES6 modularization

1. Make sure that... Is installed v14.15.1 Or later node.js
2. stay package.json Add... To the root node of "type": "module" node

---

  The default is derived   and The default import

Every js It can only be used once in the script  export default , Otherwise, an error will be reported

//  The default is derived 
//  Every js It can only be used once in the script  export default , Otherwise, an error will be reported 
let m1 = 10
let m2 = 20
let f1 = () =>{}

export default {
    m1,
    f1
}

//  The default import 
//  Be sure to write the file suffix in the path 
import i1 from './01. The default is derived .js'

console.log(i1)

 

 

Export... On demand and Import on demand  

 

//  Export... On demand 
export let s1 = 'aaa'
export let s2 = 'ccc'

export const add = x => x+10

//  Import on demand 
//  Pass on the discovery and current  js The variable name of the script conflicts , We can use  as  change   name , Only in the present js Valid in script 

import {s1 as ss,s2,add} from './03. Export... On demand .js'

let s1 = 10

console.log(ss)
console.log(s2)
console.log(s1)
console.log(add(s1))

 

Direct import  

Direct import will execute the imported js Script the program