ES-Module导入和导出

拨云见日

本篇文章主要是给大家介绍ES-Module导入和导出，还有一些需要注意的事项

导出

## 通过关键字 export 导出

#### 导出变量

//demo1.js

let str = 'string'

export str

//demo2.js

import { str } from  ".demo1.js"

console.log(str) // => string

#### 导出多个变量或者是方法/对象

//demo1.js

let arr =  []

const fun1 = () => { }

let num = 200

export {arr,fun1,num}

//demo2.js

import {arr,fun1,num} from "./demo1.js"

console.log(arr,fun1,num) //=> [] , function ,200

#### 设置别名

//demo1.js

let arr2 =  []

export { name as fooname }

//demo2.js

import { fooname } from "./demo1.js"

重命名有一个特殊的情况，如果变量名是default 就必须使用as，因为default属于保留字

#### 默认导出 

//demo1.js

let str2 = 'string2'

export default str

//demo2.js

import name from  ".demo1.js"

console.log(name) // => string2

注意事项

export导出语法需要注意的地方

//demo1.js内容如下

let num3 = 20;

export { num3 } ;//注意这里并不是对面字面量的增强/或者是导出一个对象，仅仅是语法规定这么写

 //demo2.js内容如下
 
import { num3 }  form "./demo1.js";//这里也不是对象的解决仅仅是语法规定，请大家不要混淆

//如果要导出一个对象的话使用 export default 语法

//导出  demo1.js
export default { num3 };


//引入
//这里就不能用 import { num3 } form "./demo1.js"语法了
import add form "./demo1.js"

使用ESModule语法的话，模块导出仅仅是引用并不是拷贝了一份新数据，commjs是直接拷贝了一份新数据

//demo1.js
let name1 = 'loki';
let age2 = 20;
setTimeout(() => {
    name = 'loken'
}, 1000);
export {name1,age2};

//demo2.js
import { name1,age2 }  from "./demo1.js";
name1 = 'spring' //=> 直接报错 因为导出的只读成员（也就是常量），并不可以改变
console.log(name1,age2)
setTimeout(() => {
  console.log(name1,age2)
}, 2000);

谢谢观看，如有不足，敬请指教