es6 modules export import

// CommonJS模块
let {  readfile } = require('fs');

---------------------------------------------------------------------------------------------------------------

​​​​​​​ES6模块主要有两个功能：export和import

-export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
-import用于在一个模块中加载另一个含有export接口的模块。

export 导出

a.js

建议使用如下写法，文件过大可以直接在底部看出导出哪些变量

let baseName = 'test'
let obj = {
    name: '小明'
}
function add(){
  console.log('add')
}
export { baseName, add, obj }

也可以写成这样

export baseName = 'test'
export function add(){
  console.log('add')
}

b.js

导入export 需要加 { } 导入名称不能修改

import { baseName, add, obj } from './a.js'
baseName = '132'  //报错，baseName导入的值，不能赋值，
obj.name = '小红'   //可以修改，不推荐使用，不知道从哪修改的，没有记录

想修改别名使用as

import { baseName as newBaseName, add } from './a.js'
console.log(newBaseName)

上面代码的实质是从a.js模块加载 方法和变量，这种加载称为“编译时加载”或者静态加载

--------------------------------------------------------------------------------------------------------------------------

模块整体加载

a.js

export function add(){
  console.log('add')
}
export function area(){
  console.log('area')
}

b.js

函数导入加{}写很多，可以使用整体加载

import * as utils from './a.js'
console.log(utils.add());
console.log(utils.area());

export default 

从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载

export default命令，为模块指定默认输出。

export default function add(){
  console.log('add')
}

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字

import utils from '../../utils/base'
console.log(utils());

默认导出和自定义导出同时

export default function add(){
  console.log('add')
}
export function area(){
  console.log('area')
}

import utils, { area } from './a.js'
console.log(utils());
console.log(area());

es2020  import()动态导入

由于import()返回 Promise 对象，所以需要使用then()方法指定处理函数。考虑到代码的清晰，更推荐使用await命令